Font Awesome Icon im Menü ohne Text

[Bernator]

Hallo,

möchte ein Font-Awesome Icon anstatt eines Textlinks im Hauptmenü haben. Icon + Textlink zusammen ist kein Problem. Schaffe es aber nicht, nur das Icon zu zeigen und es auch anklickbar zu machen.
Habe zwar ein Ergebnis in der Suche gefunden... Stichwort "text-indent" aber werde daraus nicht schlau und habe auch noch Stunden probieren keine Lösung.


Die Seite in der Seitenstruktur hat bei mir die Klasse "in-icon" bekommen.

Css ist wie folgt:

.navigation li.in-icon a  {
text-indent: -3000px;
display: block;
}
.navigation li.in-icon:before {
	font: 1.3333333333em/1 "FontAwesome";
	content: "\f16d";
	position: absolute;
}

Ist noch jemand da und kann mir helfen?

[hjo]

Hallo Bernator,

da du das Icon außerhalb des a-Element setzt, kann es nicht anklickbar sein. Ich würde

.navigation li.in-icon:before

ändern in

.navigation li.in-icon a:before

Schaue auch im Inspektor wie groß das a-Element ist. Vielleicht noch padding fürs a-Element setzen um die anklickbare Fläche zu vergrößern.


Hans-Jürgen

[Bernator]

Das a-Element ist zwar da und klickbar, jedoch ist das Icon nicht da. Es scheint auch bei -3000 zu sitzen. Auch

text-indent: initial;

holt es nicht sichtbar in das a-Element.

[Merlin]

Wenn ich mich nicht irre müsstest du doch deinem A-Element „Position: relative“ geben um das Icon mit absolute an diesem Element auszurichten.


Gesendet von iPhone mit Tapatalk Pro

[Bernator]

Danke für die Infos, da scheint aber irgendwo der Wurm drin zu sein, hat einfach nicht funktioniert.
Für das mobile Menü brauchte ich dann Icon + Name, dazu habe ich dann ganz normal einen Menüpunkt angelegt und per css eingeblendet.

Viele Grüße
Bernator