Was sind Icon-Fonts?

Icon-Fonts sind Sammlungen von Icons, die quasi als Schriftarten ausgeliefert werden. Das standardmäßig im EasyTemplate360v2 enthaltene Font Awesome 5 Free Icon Set ist zum Beispiel so ein Icon-Font.

Um einen Icon-Font zu nutzen sind zwei Dinge notwendig:

• Einbindung der Font-Dateien, wie jede andere verwendete Schriftart im Template.

• CSS-Styles, um CSS-Klassen zu definieren, die dann dazu führen, dass bei Verwendung der Klasse an einem Element entsprechend das Icon ausgegeben wird.

Wie kann ich eigene Icon-Fonts nutzen?

Um eigene Icon-Fonts zu nutzen - entweder komplett individuelle Sätze oder zum Beispiel die Font Awesome 5 Pro-Icons, wenn du die entsprechenden Nutzungsrechte erworben hast, sind folgende Schritte notwendig.

Font über Child-Template einbinden

Zunächst muss der Icon-Font über ein eigenes Child-Template eingebunden werden und ggf. das vorhandene Font Awesome 5 Free deaktiviert werden, falls es komplett ersetzt werden soll.

Diese Anpassung erfolgt üblicherweise, indem die Datei layout/header.tpl erweitert wird.

Wie man grundsätzlich ein Child-Template anlegt, findest du in Individualisierung durch Child-Templates.

Icon-Klassen festlegen

Im Adminbereich vom EasyTemplate360v2 im Bereich Icons musst du dann die CSS-Klassen für die Icons festlegen, die deinen neuen Icon-Font nutzen sollen. Hierzu musst du die Funktion “Eigene CSS-Klasse” nutzen und die Klasse, die dein Icon-Font definiert, eintragen.