Icons in Mainmenu Links einbauen

JuanitoBurrito · Mar 21st 2014

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.

Black Rider · Mar 21st 2014

Der Grundaufbau:

CSS

#mainMenu > ul > li:nth-child(x) > a {
	position: relative;

	&::before {
		content: "Y";
		font-family: FontAwesome;
		font-size: 22px;
		vertical-align: -6px;

		.square(24px);
	}
}

Display More

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.

JuanitoBurrito · Mar 21st 2014

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!

Black Rider · Mar 21st 2014

Link zum Forum?

norse · Mar 21st 2014

http://starbounders.de/

Ich würde übrigens einfach mal auf zu große Grafiken tippen.

Gruß norse

JuanitoBurrito · Mar 21st 2014

Also die Icons sind 24x24 px groß.
Werde heute Abend zu Hause die Grafiken dann ggf. verkleinern wenns daran liegen sollte.

norse · Mar 21st 2014

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

Black Rider · Mar 21st 2014

Ich habe den Code oben korrigiert, dann sollte es passen.

JuanitoBurrito · Mar 21st 2014

Nochmals vielen Dank.
Es funktioniert nun einwandfrei und sieht klasse aus.
Danke euch beiden!

Juan

Flo Lauterbach · Mar 22nd 2014

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

Black Rider · Mar 22nd 2014

Einfach die Webentwickler-Werkzeuge aufrufen, Overlay entfernen und gut ist.

nordx · Apr 8th 2015

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

Flo Lauterbach · Apr 9th 2015

Einmal den Livelink bitte

nordx · Apr 9th 2015

sry, hier: http://www.gsxr.at/

Flo Lauterbach · Apr 9th 2015

Die 'position' im aktiven Listenelement des Menü's steht auf 'absolute', muss aber 'relative' sein.

CSS

.mainMenu > ul > li.active > a::before {
position: relative;
}

/cheers

nordx · Apr 9th 2015

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!

Flo Lauterbach · Apr 9th 2015

Ich kann den Link nicht oft genug teilen^^
http://img.pandawhale.com/post…blinds-CSS-gif-I-lEO1.gif

Nicht schlimm, denn jeder fängt mal klein an. Lass dich nicht abschrecken und stell hier immer ruhig deine Fragen.

Pride · Feb 29th 2016

Habe das selbe Problem wie @nordx nur ich habe beim Code von @Flo Lauterbach relative stehen... Kann mir wer helfen?

Kaphalor · Feb 29th 2016

Quote from PrideGame

Habe das selbe Problem wie @nordx nur ich habe beim Code von @Flo Lauterbach relative stehen... Kann mir wer helfen?

Quote from Flo Lauterbach

Einmal den Livelink bitte

Pride · Feb 29th 2016

Entschuldigung. http://forum.pridegame.de/

Icons in Mainmenu Links einbauen

Participate now!

Share

Tags