Integration von Icon-Fonts mit dem ThemeManager

Bei der Verwendung von Icon-Fonts, die über Dienste wie IcoMoon oder Fontello erstellt und heruntergeladen wurden, stellt sich oft die Herausforderung, die zugehörigen CSS-Dateien einzubinden und die entsprechenden Klassen in Templates oder CSS-Anpassungen für Komponenten zu integrieren.

Der Contao ThemeManager ermöglicht es Anwendern, ihr Icon-Set direkt in den Systemeinstellungen auszuwählen. Automatisch generiert der ThemeManager das benötigte CSS, und die festgelegten Optionen stehen systemweit im StyleManager zur Verfügung. Hiermit wird eine unkomplizierte Verwendung von Icons in Listen, Downloads, Links, Buttons, Formularfeldern uvm. auf der Website ermöglicht.

RockSolid Custom Elements

Über die Erweiterungen RockSolid Custom Elements und Rocksolid Icon Picker werden zusätzliche Inhaltselemente bereitgestellt, in welchen Icons ausgewählt werden können.

Icon-Set im System einstellen

Eine Icon-Schriftart kann über Dienste wie IcoMoon oder Fontello erstellt und anschließend heruntergeladen werden. Wenn es sich um eine .zip-Datei handelt, muss diese zunächst entpackt werden.

Im Download einer IcoMoon-Schriftart befinden sich die benötigten Dateien im Ordner fonts:

Folgende Dateien müssen in einen Ordner abgelegt werden:

• *.svg
• *.woff oder *.woff2

Um die Icon-Schriftart einzubinden, muss die *.svg unter System -> Einstellungen unter ThemeManager eingebunden werden.

Tip

Während der Kompilierung des Themes werden die Icons generiert, sodass diese in den Icon-Komponenten und den Style-Manager Einstellungen ergänzt werden.

Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.

Asset-Compiler Report

Icons innerhalb der Link-Einstellungen

Icon-Auswahl im RockSolid Icon-Picker

Ändern der Icon-Schriftart in der Theme-Konfiguration

Sofern die Icon-Font-Family in den Icon-Einstellungen verändert wurde (Default: 'ctm-icon'), können die durch den ThemeManager generierten Icons nicht korrekt angezeigt werden.

Hinweise und Fehlermeldungen

Folgende Hinweise und Fehlermeldungen können vom Asset-Compiler zurückgegeben werden:

Fehlermeldung	Information / Behebung des Fehlers
No ThemeManager icon font specified within your settings	Es wurde keine Icon-Font im System eingestellt
The path: ... does not exist	Der Dateipfad der eingestellten Icon-Schriftart existiert nicht mehr. Kontrolliere in den Einstellungen ob der Ordner existiert und stelle sie erneut ein.
Could not find a .svg file within ...	Die .svg der Icon-Schriftart konnte nicht gefunden werden. Kontrolliere in den Einstellungen ob die .svg existiert und stelle sie erneut ein.
Could not find a related .woff file within ...	Es wurde eine .svg eingestellt, im selben Ordner befindet sich jedoch keine *.woff/*.woff2-Datei. Kontrolliere die eingestellte Icon-Schriftart und füge im selben Ordner die fehlende *.woff/*.woff2-Datei ein.
Could not find a related .woff file within ...	Es wurde eine .svg eingestellt, im selben Ordner befindet sich jedoch keine *.woff/*.woff2-Datei. Kontrolliere die eingestellte Icon-Schriftart und füge im selben Ordner die fehlende *.woff/*.woff2-Datei ein.
File: ... does not exist	Der Dateipfad der eingestellten Icon-Schriftart existiert nicht mehr. Kontrolliere in den Einstellungen ob der Ordner existiert und stelle sie erneut ein.
Could not find icons in *.svg	Die eingebundene .svg-Datei ist nicht valide. Generiere die Icon-Schriftart über IcoMoon oder Fontello neu.
Skipped icon with unicode: xxxx. No glyph-name given.	Ein Icon im enthaltenden Icon-Set wurde übersprungen. Überprüfe die .svg-Datei mit einem Texteditor oder einer Icon-App.

Bestehendes Set erweitern

Um ein bestehendes Icon-Set in Zukunft zu erweitern, empfiehlt es sich die durch den Icon-Service erstellte Datei selection.json im Datei-System hochzuladen.

*.json Dateien in der Dateiverwaltung hochladen

Um Dateien vom Typ *.json in der Dateiverwaltung hochladen zu können, muss dieser Dateityp unter Erlaubte Upload-Dateitypen hinzugefügt werden.

Die selection.json der Schriftart kann grundsätzlich über Drag-and-Drop in die Icon-Apps (IcoMoon / Fontello) gezogen werden, um die Icons zu laden.

Tip

Wie IcoMoon genutzt wird, kann hier nachgelesen werden. Für Fontello findet sich eine Dokumentation auf GitHub.

Übersicht der IcoMoon-App

Nach Hinzufügen von neuen Icons kann die bereits eingebundene und existierende Datei über das Dateisystem überschrieben werden.

Es empfiehlt sich die neue selection.json wieder im Dateisystem abzulegen, damit die neu hinzugefügten Icons bei einer erneuten Bearbeitung nicht verloren gehen.

Existierende Icons überschreiben

Wenn Name und Glyph-code mit der alten Version eines Icons übereinstimmen, werden die in der Website eingestellten Icons ausgetauscht.

Existierende Icons löschen

Werden bereits eingestellte Icons aus einem Icon-Set entfernt, werden diese nicht mehr korrekt angezeigt. Diese müssen in den verfügbaren Komponenten entfernt oder umgestellt werden.