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

SELF-Forum

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

Oli
– Informationen zu den Bewertungsregeln

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

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

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

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

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Oli,

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

    --
    Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      Oli
      – Informationen zu den Bewertungsregeln

      Vielen Dank! Du hast mein Problem gelöst.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

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

        Gunnar Bittersmann Homepage des Autors (Versionen)
        – Informationen zu den Bewertungsregeln

        @@Gunnar Bittersmann

        Mir fällt auch erstmal nichts besseres ein als das Icon und das erste Wort des Linktitels in ein Element zu packen.

        Absolute Positionierung geht auch nicht. ☞ Abb. 5 ergänzt

        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

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

    marctrix Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hej Oli,

    Soll nie durch Zeilenumbruch getrennt werden:

    <svg>[...]</svg>&nbsp;Katze

    Das würde dir all das Gemurkse ersparen.

    Wenn das Icon mehr als Schmuck ist, fehlt in deinem Code noch die enthaltene Information für alle, die das Icon nicht sehen.

    Die bekommst du so rein

    <svg>
<title>Info</title>
</svg>

    Wie man das mit FA5 jetzt macht, das ja den Icon-Font selbstständig durch ein SVG ersetzt, weiß ich nicht so genau.

    Überträgst du eigentlich alle Icons zum Client oder nur die benötigten? In FA5 gibt es ja tausend (oder sogar tausende?).

    Ist ja iegentlich gut gemacht, daher hoffe ich, dass nicht die kompletten Sets zum client wandern, um eines zu benutzen.

    Ich erstelle mir meine SVG-Sprites immer händisch und binde die SVGs dann mit use ein.

    Seiten die den IE unterstützen sollen, bekommen ein Polyfill mit.

    Marc

    --
    Ceterum censeo Google esse delendam
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@marctrix

      <svg>[...]</svg>&nbsp;Katze

      Das würde dir all das Gemurkse ersparen.

      Nicht. (☞ Abb. 1)

      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

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

        marctrix Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hej Gunnar,

        @@marctrix

        <svg>[...]</svg>&nbsp;Katze

        Das würde dir all das Gemurkse ersparen.

        Nicht. (☞ Abb. 1)

        Danke und was soll das?

        Manchmal finde ich doof, wie Browser etwas rendern…

        img werden nicht ungebrochen svg schon. Logik?

        Marc

        --
        Ceterum censeo Google esse delendam
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln