Den Icon-Font anpassen und neue Icons hinzufügen
am von Martin Auswöger • @ausi
Erfahren Sie Schritt für Schritt wie Sie den Icon-Font Ihres Themes erweitern können. Tauschen Sie einzelne Icons aus oder fügen neue Icons hinzu. Sie benötigen dazu keine zusätzliche Software. Eine Contao-Installation mit installiertem Theme ist alles was Sie brauchen.
Icon-Font in IcoMoon importieren
IcoMoon Menüleiste
Für die Anpassung des Icon-Fonts verwenden wir in diesem Artikel die kostenlose Online-Software IcoMoon. Öffnen Sie dazu die Seite icomoon.io/app in Ihrem Browser, klicken links oben auf den Button Import Icons und wählen den SVG-Icon-Font rocksolid-icons.svg aus. IcoMoon erstellt nun automatisch ein neues Icon-Set mit dem Namen rocksolid-icons.
Die SVG-Datei des Icon-Fonts finden Sie auf Ihrem Webspace im Ordner files/THEMENAME/fonts.
Icons verändern oder austauschen
IcoMoon Menüleiste
Um einzelne Icons zu verändern oder mit einem anderen Symbol auszutauschen, wählen Sie in der Menüleiste den Stift-Button Edit und klicken auf das gewünschte Icon. Einfachere Modifikationen wie Größe, Position oder Name des Icons können direkt vorgenommen werden. Um das Icon mit einem Grafikprogramm zu bearbeiten klicken Sie auf Download (SVG). Mit dem Klick auf Replace können Sie eine SVG-Datei auswählen, mit der das Icon ersetzt werden soll.
Icon-Bearbeitungsoptionen
Icons hinzufügen
Iconset-Menü
Für die Erweiterung des Icon-Fonts um neue Icons gibt es mehrere Möglichkeiten. Um ein einzelnes Icon, das als SVG-Datei vorliegt hinzuzufügen, klicken Sie rechts neben dem Icon-Set rocksolid-icons auf das Menü-Symbol, dann auf Import to Set und laden das gewünschte SVG-Icon hoch. Auf diese Weise können Sie auch einen kompletten Icon-Font hinzufügen.
IcoMoon selbst bietet auch einige Icon-Fonts zur Auswahl, um diese hinzuzufügen scrollen Sie nach unten und klicken auf Add Icons From Library und fügen die gewünschten Icon-Fonts zur Übersicht hinzu. Makieren Sie nun die gewünschten Icons aus dem hinzugefügten Icon-Font und wählen Sie im Menü von rocksolid-icons den Punkt Copy Selection to Set.
Icon-Font exportieren
IcoMoon Fußzeile
Wenn Sie die Anpassungen und Ergänzungen abgeschlossen haben, wählen Sie im Menü von rocksolid-icons den Punkt Select All und klicken rechts unten auf Generate Font und danach ebenfalls rechts unten auf Download. Ersetzen Sie die Icon-Font-Dateien auf Ihrem Webspace mit den Dateien aus dem Ordner fonts des Download-Pakets. Achten Sie dabei darauf, dass Sie die Dateien in rocksolid-icons umbenennen müssen.
Falls die neuen Icons im Picker nicht korrekt dargestellt werden, leeren Sie bitte den Cache des Browsers, da Schrift-Dateien oft sehr hartnäckig im Browser-Cache verharren.
Damit auch die Suche des Icon Picker die Icons erkennt, kopieren Sie die Datei style.css des Download-Pakets in den Ordner der Icon-Font-Dateien und benennen Sie sie in rocksolid-icons.css um. Löschen Sie die Datei rocksolid-icons.html falls sie existiert.
IcoMoon speichert Ihre Icons und Einstellungen in Ihrem Browser ab, dadurch können Sie im Nachhinein Ihr Icon-Set weiter bearbeiten.
Fertig
Die neuen Icons sind nun einsatzbereit und können in allen Custom Elements mit Icon Picker ausgewählt werden.
Über den Author
Martin Auswöger
Martin ist einer der Gründer von RockSolid Themes und beteiligt sich als Core-Developer an der Entwicklung von Contao. Die Suche nach effizienten und intelligenten Lösungen treiben ihn täglich an. Für Kochen, Gesellschaftsspiele oder eine gemütliche Bergtour kann man ihn fast immer begeistern.
