Tag 4 - Icons im Menü integrieren mit Joomla! – So geht's mit nativen Funktionen

Das Hinzufügen von Icons zu Menüeinträgen in Joomla lässt sich ganz einfach mit den nativen Funktionen umsetzen. Du kannst entweder ein Bild als "Link Image" verwenden oder mithilfe der "Link Icon Class" Font Awesome-Icons hinzufügen. In diesem Artikel zeige ich dir Schritt für Schritt, wie du Icons in deinem Menü integrierst.

Font Awesome Icons mit Hilfe einer Link Icon Klasse hinzufügen

Für schlichte, skalierbare Icons kannst du die "Icon Klasse zum Link" nutzen. Joomla unterstützt hierbei die beliebte Icon-Bibliothek Font Awesome. Diese Bibliothek bietet eine umfangreiche Sammlung an Symbolen, die sich für eine Vielzahl von Anwendungsfällen eignet. Eine Übersicht aller verfügbaren Icons findest du im Font Awesome Cheatsheet.

Font Awesome implementieren

Prüfe zunächst, ob dein verwendetes Template die Font Awesome-Bibliothek lädt. Der Joomla-Core (in der aktuellen Version) liefert Font Awesome 6 (Free) bereits mit. Sofern du Cassiopeia als Template nutzt, kannst du FontAwesome direkt nutzen. 

Wenn du ein anderes Template nutzt, überprüfe, ob Font Awesome bereits geladen wird. Falls die Bibliothek nicht standardmäßig integriert ist, musst du sie manuell in dein Template einbinden. Hierzu kannst du entweder den WebAssetManager nutzen (empfohlen) oder alternativ der Anleitung auf der Font Awesome Website folgen.

Menüeintrag bearbeiten und Klasse ergänzen

Bearbeite den gewünschten Menüeintrag in deinem Joomla-Menü. Im Tab Link Typ findest du das Feld "Icon Klasse zum Link". Hier kannst du eine Font Awesome-Klasse eingeben, z. B.: fa fa-home

Was machen die Klassen?

• fa = Die grundsätzliche Klasse, die gesetzt werden muss und dafür sorgt, dass die Icons als Iconfont geladen werden.
• fa-home = Spezifische Klasse um das gewünschte Icon zu laden

Individuelle Icons als Grafik zu einem Menüeintrag hinzufügen

Die mitgelieferten Icons sind nicht individuell für dein Webprojekt? Kein Problem! Neben der Verwendung von Icon-Bibliotheken wie Font Awesome können auch individuelle Icons oder komplexere Grafiken als visuelle Elemente zu einem Menüeintrag hinzugefügt werden. 

Hierzu kann einfach eine Grafik hochgeladen werden und als “Bild zum Link” im jeweiligen Menüeintrag hinterlegt werden. 

Wie man im Screenshot bereits erkennen kann, erfordert die Integration eigener Grafiken als Menü-Icons häufig kleinere Anpassungen am CSS, um ein konsistentes Erscheinungsbild zu gewährleisten. Beispielsweise können Grafiken in ihrer Größe vereinheitlicht werden oder ein kleiner Abstand zwischen Icon und Titel des Menüeintrags ergänzt werden.

Ich wünsche viel Spaß beim Ausprobieren!