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.
  • :thumbup:

    Bleib(t) gesund!

    Beste Grüße Jörg


    ---

    Ich nutze Zeta Producer Business / Windows 11 (jeweils aktuellste Version)

  • Hallo zusammen.

    Ich habe nochmals eine Frage zu der Einbindung der Icons.

    Ich habe mir nun auf der Seite https://fontawesome.com/v4.7/icons/ ein entsprechendes Mail Icon eingebunden.

    <i class="fa fa-envelope" aria-hidden="true"></i>

    Wie bekomme ich nun den Verweis auf meine Kontaktseite dahin?

    Irgendwie stehe ich gerade auf dem Schlauch. :wacko:

  • 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:

  • 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.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!