CSS Hilfe benötigt zu Selectorenhierarchie

[Gunnar Bittersmann]

@@Sven

ich tausche gerade meine Gif-Icons aus den 2000er Jahren gegen Font-Awesome-Icons aus.

Das machst du wie? Als Iconfont oder als SVGs? Wenn letzteres: gut so. Wenn ersteres: nicht machen! Verwende SVGs.

Und an eine Textalternative für die Icons hast du auch gedacht (wenn du die Icons ohne Text dazu verwendest)?

Falsch:

<button>
  <i class="fa-solid fa-pen"></i>
</button>

Richtig:

<button>
  <span aria-hidden="true" class="fa-solid fa-pen"></span>
  <span class="visually-hidden">Bearbeiten</span>
</button>

mit der in How-to hide content gezeigten Regel für .visually-hidden, wenn der Text nicht visuell angezeigt werden soll.

Erwähnte ich schon, dass du SVGs verwenden solltest?

---

Nun besteht aber das Problem, dass diese fa-Icons etwas unterschiedlich groß wirken und auch in Höhe nicht komplett auf einer Linie stehen, wenn ich mehrere hintereinander einsetze.

Huch? Die Icons sollten doch eigentlich so gestaltet sein, dass sie zueinander passen? 🤔

🖖 Живіть довго і процвітайте