Font Awesome Icons im Design "Fire" hinzufügen

  • Im neuen WoltLab Suite Design "ire" werden im Menü Font Awesome Icons benutzt. Das Box-Menu soll dadurch etwas aufgehübscht werden. Doch allerdings sind im Stil nur geringfügig Icons bereits gesetzt. Folgende Seiten werden unterstützt:

    • Startseite (Home, Portal etc..)
    • Forum
    • Mitgliederliste
    • Einsatzübersicht
    • Technik / Fahrzeuge


    Wer weitere Icons hinzufügen für seine Menüpunkte hinzufügen will kann folgendes CSS-Schnippsel auf seine Bedürfnisse anpassen:

    CSS
    1. .mainMenu .boxMenu > li > a[href*="forum"] .icon::before {
    2. content: "\f086";
    3. }

    Bei "forum" wird einfach der Name vom Menüpunkt eingefügt. Unter "content" wiederum das Font Awesome Icon. Ihr findet eine Auflistung aller FA-Icons hier: Font Awesome Icons

    Weitere Fragen bitte hier im Thema oder alternativ im Fehler und Probleme Bereich.

  • Wie sieht es dann mit dem Dropdown Menü bei Fire aus?

    Nehmen wir mal als Beispiel den Menüpunkt Mitglieder.

    In diesem Menüpunkt gibt es ein Dropdown mit weiteren Menüpunkten. Team, Benutzer Online usw. wie kann ich diese Menüpunkte im Dropdown ansprechen und ein Icon davor setzen? Habe schon es mit einem ol versucht, boxMenuDepth1, ich weiß nicht mehr wirklich weiter wie man das ganze Ansprechen könnte. Funktionieren würde es ja, mit dem richtigen Code?

  • Gute Frage. Damit habe ich mich noch nicht ganz weiter beschäftigt. Am besten du schaust dafür mal im WoltLab Forum vorbei und fragst dabei allgemein mal, wie sowas (Stil unabhängig) funktioniert.

  • Moin Simon!

    ich nutze dein Fire Style auf meinem Board.

    Ich habe einen Menüpunkt Namens "Test" erstellt.

    So sieht der CSS Code aus:

    Code
    1. mainMenu .boxMenu > li > a[href*="Test"] .icon::before {
    2. content: "\f08d";
    3. }

    Nur leider ändert sich da nichts...


    Board URL: https://forum.strawberry-rp.de

    Einmal editiert, zuletzt von TobseN ()

  • Irgenwie stehe ich gerade auf dem Schlauch ^^


    So schaut es gerade aus


    Ich habe das Mainbenü weiss hinterlegt und möchte die Icons Schwarz haben aber nur wenn sie nicht Aktiv sind. Da beim Aktiven Button der Hintergrund Rot wird genauso beim Hover über den Button.


    Wie kann ich es Bewerkstelligne das die Icons Schwarz sind aber beim Hover und Aktiven Button weiss?



    Gruß mcburn

  • Ja das hat Funktioniert. Nun stehe ich aber vor dem Problem das in dem Aktiven Reiter das Icon schwarz ist. Hast du eine Idee wie ich das ändern kann?

    Klar, hiermit:

    CSS
    1. .mainMenu .boxMenu > li.active .icon32 {
    2. color: #FFF;
    3. }
  • X/ hatte es getestet per Console im FF und dort passierte nichts und da dachte ich das ich falsch gesucht habe.


    Code geht aber einwandfrei :) Danke Simon


    P.S. wenn man sich wundert das das Ansprechen eines Users nicht geht und man dann sieht das man statt Simon den Netznamen von Woltlab versucht anzusprechen :D^^