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

[Matthias Apsel]

Hallo Oli,

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

Geschützte Leerzeichen   bringt in dieser Konstellation aber nichts.

Vermutlich weil die i-Elemente auskommentiert und durch ein svg-Icon ersetzt werden. Dann steht in deinem Quelltext:

<svg class="svg-inline--fa fa-cat fa-w-20" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M425..."></path></svg><!-- <i class="fas fa-cat"></i> -->&nbsp;Katze

Wisst Ihr wie ich den Zeilenumbruch zwischen Icon und nachfolgendem Wort verhindern kann?

MIthilfe der CSS-Eigenschaft white-space.

Bis demnächst
Matthias