Verwendung: Anzeige der Icons

Markus's Avatar

Markus

11 Jul, 2018 04:13 PM

Produkt: Custom Elements Contao
Contao-Version: 4.4

Hallo,

ich habe den Icon_picker als Feld verwendet, um die materialdesignicons von https://materialdesignicons.com/ einzubinden. Der entsprechende Code meiner Customelement-Konfiguration ist folgender:

'icon' => array(
    'label' => array('Icon', 'Wählen Sie ein Icon, um den zu illustrieren.'),
    'inputType' => 'rocksolid_icon_picker',
    'eval' => array(
        'iconFont' => 'files/source/iconfont/fonts/materialdesignicons-webfont.svg',
    ),
),

im HTML binde ich das wie in der Demo ein:

<section data-icon="&#x<?php echo $this->icon ?>">
   <?php echo $this->text ?>
</section>

Allerdings erscheint kein Icon im Frontend. Die Iconfont ist eingebunden und funktioniert auch, da ich die Icons im Picker wählen kann.

Muss hier noch was beachtet werden?

Viele Grüße

  1. Support Staff 1 Posted by RockSolid Theme... on 12 Jul, 2018 06:04 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Im Frontend wird zusätzlich auch ein CSS-Code benötigt der das data-icon-Attribut ausliest und als Icon einbindet. Dieser kann z. B. folgendermaßen aussehen:

    *[data-icon]:before {
        content: attr(data-icon);
        font: 100%/1 "NAME DES ICON-FONTS";
        display: inline-block;
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac