Icons im Navigationsmenü

  • Bezugnehmend auf dieses Thema möchte ich hier einmal mehrere Möglichkeiten aufzeigen wie man ganz einfach Icons in das Navigationsmenü einbinden kann.

    Das Icon kann in Kombination mit Text oder auch einzeln eingeblendet werden. Nach dem Einfügen auch immer die "Mobile Darstellung" beachten.


    Icon Bild

    • Das Bild in der gewünschten Größe und Farbe über die Bildverwaltung in das Projekt übernehmen. Erweitert > Bilder > Importieren
    • Anschließend die Objekt-ID des Bildes kopieren. Zahnrad > Mehr > Objekt-ID kopieren
    • Diese kopierte Objekt-ID in unten stehenden Code einfügen und diesen als Name der Seite einfügen.
    • <img src="oid://image/deinbild" alt="AltText">



    Icon Unicode

    • Im Web nach einem geeigneten Unicode suchen.
    • Den HTML-Code des Unicodes als Name der Seite einfügen. zB.: &#10084;
    • Größe und Farbe werden von den Einstellungen des Layouts übernommen.
    • Das ganze mit den wichtigsten Browsern testen. Manche Unicodes werden von den Browsern unterschiedlich dargestellt.



    Icon Font Awesome

    • Ab "Zeta Producer 15.4" ist "Font Awesome 4.7.0" bereits installiert. Somit muss lediglich der entsprechende Code eingegeben werden um ein Icon einzubinden.
    • Auf der Seite https://fontawesome.com/v4.7/icons/ das gewünschte Icon auswählen und unten stehnden Code damit anpassen.
    • Diesen Code dann als Name der Seite einfügen.
    • <i class="fa fa-home"></i>
    • Größe und Farbe werden ebenfalls von den Einstellungen des Layouts übernommen. Mann könnte das aber auch mit etwas CSS anpassen.
  • Vielen Dank für die ausführliche Erklärung. Weis noch jemand wie man die Icons eventuell vergrößern kann?

    Beste Grüße

  • Hallo Wolfgang, für die Verlinkung auf eine andere Seite oder sonstiges. Siehe Bild

  • Hallo MichaelM.


    Ich habe den Code im Widget eingegeben. Das Symbol entsteht auch dadurch.

    Deine Lösung habe ich gar nicht auf dem Schirm gehabt.

    Wie ist denn hier die Vorgehensweise?

    Ich habe das Symbol im Footer eingebaut. Wie gesagt, in einem Widget.

    Bei dir sieht es aber etwas anders aus. :pinch:

    • Offizieller Beitrag

    Hallo Wolfgang,

    da sind Sie hier im falschen Thema. Hier geht es explizit um Icons im Navigationsmenü, nicht um Icons in Artikeln. Bitte ggf. Neues Thema erstellen.