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

Menüleiste „Import Icons“

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

Menüleiste „Edit“

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

Icon-Bearbeitungsoptionen

Icons hinzufügen

Iconset-Menü

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.

Add Icons from Library

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

Download Icon-Font

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.

Kostenlos über kommende Inhalte informiert werden

Neue Beiträge und exklusive Freebies direkt in Ihre Inbox

Holen Sie sich die monatlichen, kostenlosen Updates über neue Artikel, Themes und Erweiterungen rund um Contao. Kein Spam. Nur nützliche und exklusive Inhalte und Sie können sich mit nur einem Klick abmelden. Bleiben Sie auf dem Laufenden!

Über den Author

Martin Auswöger

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.

Folgen Sie Martin auf Mastodon und GitHub.

RockSolid Themes Blog

Das RockSolid Themes Entwickler-Team schreibt über Webdesign, Entwicklung und Neuigkeiten. Plus laufende hilfereiche Tipps, Tutorials und Inhalte rund um Contao.

Themes kostenlos testen

Open Sauce free

Testen Sie unsere Erweiterungen und Themes mit Open Sauce. Unserem responsive Free Theme für Contao.

Immer auf dem Laufenden