Gunnar Bittersmann: Fontawesome Icon + Geschütztes Leerzeichen + Nachfolgender Text = Klappt nicht

Beitrag lesen

SELF-Forum

Fontawesome Icon + Geschütztes Leerzeichen + Nachfolgender Text = Klappt nicht

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Matthias Apsel

Soll nie durch Zeilenumbruch getrennt werden: <i class="fas fa-cat"></i>&nbsp;Katze

Geschützte Leerzeichen &nbsp; bringt in dieser Konstellation aber nichts.

Vermutlich weil die i-Elemente auskommentiert und durch ein svg-Icon ersetzt werden.

Huch, Fontawesome kommt jetzt mit einem Script daher, welches die unsäglichen i-Elemente (Verwende keine Icon-Fonts!) durch Inline-SVG ersetzt‽

Mit dem Kommentar hat das nichts zu tun, der Umbruch erfolgt auch bei <a href="…"><svg>…</svg>&nbsp;Linktitel</a> (Abb. 1)

MIthilfe der CSS-Eigenschaft white-space.

Aber für welches Element? Sicher nicht fürs a-Element! Darin müssen Zeilenumbrüche erlaubt sein. (Abb. 2)

Mir fällt auch erstmal nichts besseres ein als das Icon und das erste Wort des Linktitels in ein Element zu packen. Früher war dafür mal das nobr-Element vorgesehen (in Browserimplementationen, nicht im HTML-Standard; Abb. 3)

Also ein span verwenden und dafür white-space: nowrap angeben. (Abb. 4)

LLAP 🖖

--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
Beitrag melden
–
Informationen zu den Bewertungsregeln