Font Awesome Icon im Menü ohne Text

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:

Code:

---

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

Hallo Bernator,

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

Code:

---

.navigation li.in-icon:before

---

ändern in

Code:

---

.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

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

Code:

---

text-indent: initial;

---

holt es nicht sichtbar in das a-Element.

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

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