tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/28682-verwendung-anzeige-der-iconsRockSolid Themes: Discussion 2018-07-12T06:04:15Ztag:help.rocksolidthemes.com,2012-07-23:Comment/456675452018-07-11T16:13:48Z2018-07-12T05:54:08ZVerwendung: Anzeige der Icons<div><p>Produkt: Custom Elements Contao<br>
Contao-Version: 4.4</p>
<p>Hallo,</p>
<p>ich habe den Icon_picker als Feld verwendet, um die materialdesignicons von <a href="https://materialdesignicons.com/">https://materialdesignicons.com/</a> einzubinden. Der entsprechende Code meiner Customelement-Konfiguration ist folgender:</p>
<pre>
<code>'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',
),
),</code>
</pre>
<p>im HTML binde ich das wie in der Demo ein:</p>
<pre>
<code><section data-icon="&#x<?php echo $this->icon ?>">
<?php echo $this->text ?>
</section></code>
</pre>
<p>Allerdings erscheint kein Icon im Frontend. Die Iconfont ist eingebunden und funktioniert auch, da ich die Icons im Picker wählen kann.</p>
<p>Muss hier noch was beachtet werden?</p>
<p>Viele Grüße</p></div>Markustag:help.rocksolidthemes.com,2012-07-23:Comment/456675452018-07-12T06:04:14Z2018-07-12T06:04:14ZVerwendung: Anzeige der Icons<div><p>Vielen Dank für Ihre Frage.</p>
<p>Im Frontend wird zusätzlich auch ein CSS-Code benötigt der das <code>data-icon</code>-Attribut ausliest und als Icon einbindet. Dieser kann z. B. folgendermaßen aussehen:</p>
<pre>
<code>*[data-icon]:before {
content: attr(data-icon);
font: 100%/1 "NAME DES ICON-FONTS";
display: inline-block;
}</code>
</pre></div>RockSolid Themes