Schawohl: Ungewollte Linebreaks mit Genericon

hallo allerseits,

folgender Quelltext führt trotz   zu einem Linebreak direkt nach dem Mail-Icon (irgendwie blöd). Woran liegt das und wie kriege ich das in den Griff? Danke.

<a href="mailto:kap-support@gvweser-ems.de"><em class="genericons-neue genericons-neue-mail">&nbsp;</em>kap‑support@gvweser‑ems.de</a>

  1. Hallo Schawohl,

    das nbsp muss vermutlich aus dem em hinaus. Das ist die schnelle, aber nicht die sinnvolle Lösung.

    Lass das nbsp weg und gib dem a Element die white-space: pre Eigenschaft (CSS). Dann reicht ein Leerzeichen oder zwei. Alternativ erzeuge den Abstand zwischen Icon und Text per margin-right am em Element.

    Rolf

    --
    sumpsi - posui - clusi
    1. @@Rolf B

      das nbsp muss vermutlich aus dem em hinaus. Das ist die schnelle, aber nicht die sinnvolle Lösung.

      Das stimmt. Du hast aber auch keine sinnvolle Lösung genannt. Bei einer sinnvollen Lösung muss auch das em-Element raus.

      Wie wird das Icon überhaupt dargestellt? Als Hintergrundbild? Dann braucht man außer dem a-Element gar kein zusätzliches Element.

      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
      1. Hallo Gunnar,

        das Weglassen des <em> könnte durchaus funktionieren; die Genericons haben ein .css das für die Icons :before-Pseudoelemente setzt (heißt: einen Container braucht man nur wenn man das Icon dahinter haben will, oder muss sich das passende Zeichen aus dem CSS rauskopieren).

        Das war mir aber zu viel, um es per Handy zu vermitteln. Jetzt hab ich geguckt; es gibt Genericons als Iconfont und als SVG-Set - ich habe aber keine Lust, mich damit im Detail zu befassen.

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo Gunnar, hallo Rolf, Danke für die ersten Ideen. Ich fürchte ich muss wohl doch intensiver in das CSS einsteigen. Nun gut... Hatte gehofft euch fällt vielleicht was einfaches ein. Trotzdem Danke! Ingfried

          1. Hallo Schawohl,

            Hatte gehofft euch fällt vielleicht was einfaches ein.

            Viel einfacher als

            Lass das nbsp weg und gib dem a Element die white-space: pre Eigenschaft (CSS). Dann reicht ein Leerzeichen oder zwei.

            wird es nicht gehen.

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        2. @@Rolf B

          es gibt Genericons als Iconfont und als SVG-Set

          Wozu zu sagen ist, dass man von Iconfonts die Finger lassen sollte und SVG nehmen sollte.

          Erwähnte ich schon, dass man keine Iconfonts verwenden sollte?

          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
          1. Hello,

            es gibt Genericons als Iconfont und als SVG-Set

            Wozu zu sagen ist, dass man von Iconfonts die Finger lassen sollte und SVG nehmen sollte.

            Erwähnte ich schon, dass man keine Iconfonts verwenden sollte?

            Gunnar, Du solltest darauf hinweisen, dass man keine Iconfonts benutzen sollte.

            Glück Auf
            Tom vom Berg

            --
            Es gibt nichts Gutes, außer man tut es!
            Das Leben selbst ist der Sinn.