Icons in Mainmenu Links einbauen

  • Hallo Community.
    Mein aktuelles Design welches ich verwende hat keine Icons neben die Main Menu Links. D.h z.B für Forum, Mitglieder, Vote etc. sieht man nur den Linknamen. Nun hätte ich gerne links neben dem Link Namen im Main Menü ein kleines Icon eingebaut.
    Im ACP hatte ich testweise mal einfach ein <img src..> vor den Linknamen gepackt. Das Icon wird mir angezeigt und es sieht auch alles super aus, nur leider habe ich dann das Problem dass der Seitentitel jeder Seite bzw dass was mir der Browser als Seitenname im Tab / Fenster anzeigt immer mit einem <img src...> beginnt.
    Er nimmt anscheinend immer den Linknamen als Seitennamen und schluckt dann natürlich auch den html img Tag.


    Ich bin mir sicher dass ist nicht der gewollte Weg und man sollte über Templates bzw css spezische Definitonen für die unterschiedlichen Links gehen.
    Eine Idee wie ich am besten und einfachsten die Icons einbauen könnte?


    Danke euch.

  • Der Grundaufbau:

    Wobei X = die Nummer des Eintrags (nach Sortierung) und Y der entsprechende Code für das Icon, sofern du die Font Awesome nutzen willst.
    Falls du wirkliche Bilder angeben willst, kannst du diese über content: url("../path/image.png"); angeben.

  • Vielen Dank Black Rider für deine schnelle Antwort.
    Es funktioniert wunderbar nur leider habe ich nun das Problem dass die Schrift nicht mehr mittig ausgerichtet ist sondern nach unten verschoben ist wenn ein Icon eingebaut ist.


    Hier siehst du was ich meine
    [Blocked Image: http://starbounders.de/menu.PNG][Blocked Image: http://starbounders.de/images/menu.PNG]
    Ich verwende deinen Code wobei ich nochmal ein
    padding-right: 8px nach dem before hinzugefügt habe, damit das Icon nicht direkt mit der Schrift kollidiert.


    Eine Idee was ich vergessen hab?
    Vielleicht ein padding-top: -Xpx nach dem before tag damit die Schrift wieder nach oben gezogen wird?


    Danke dir!

  • Für die Theorie spricht m. E., dass es beim ersten Menüpunkt, in dem ein Icon von 16x16px verwendet wird, nicht zum beschriebenen Phänomen kommt.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Tagchen @JuanitoBurrito ,


    das mit dem Werbeblockerdetector ist eine Sache, die mir in der letzten Zeit schon öfters aufgefallen ist und mir etwas sauer aufstößt. Ich verstehe die Problematik mit Werbeblockern und verstehe auch, dass viele Admins sich dagegen wehren wollen. Jedoch finde ich es argh bescheiden, dass eine Supportanfrage kommt und man erst seinen Werbeblocker deaktivieren muss, um helfen zu können. Zwar konnte ich dir in diesem Fall nicht mehr helfen, da das Thema schon abgeschlossen ist, aber ich wollte mir das Endergebnis anschauen.
    Wenn ich helfen kann, dann mach ich es auch wirklich gerne - ohne wenn und aber.. Genauso deaktiviere ich meinen Werbeblocker auch gerne, wenn ich ein Projekt mag und diesem auch weiterhelfen möchte. Doch solche Mittel bewirken bei mir nur, dass ich die Seite sofort wieder verlasse.
    Ich erwarte an dieser Stelle auch nicht wirklich Feedback und will eigentlich auch keine Diskussion lostreten - ich würde es mir nur wünschen, wenn man bei Fragestellungen den Helfern etwas entgegenkommt ;) So von Admin zu Admin ^^


    lott jonn!
    Flo

  • Ich muss nun doch auf das Thema antworten:
    Das mit dem Symbol einfügen klappt ja ganz prima, nur wenn ich das Menü aufrufe, wird das vorangestellte Symbol total verschoben.


    Siehe die zwei Bilder:


    Woran liegt das?


    LG,
    nordx

  • Hallo Flo, danke dir sehr!


    Muss mich noch weiter in diese CSS Less Geschichte einarbeiten, wenn man die mal verstehen würde ist das ja ziemlich genial! :thumbup: