Icons einfügen

[molily]

Hallo,

<span><i class="fa fa-check abstand10"></i>Herstellergarantie</span>

Missbrauch des i-Elements. i steht nicht für Icon.

Wozu überhaupt diese Elemente? Man kann auch die span-Elemente (besser: li-Elemente) so stylen, dass sie die ✔ enthalten.

Das ist eine Konvention, die m.W. durch Bootstrap popularisiert wurde. Ein leeres Element für Icons zu verwenden, bringt gegenüber direktem :after/:before { content: '☺' } Flexibilität mit sich. Das Icon lässt sich durch Änderung des HTML beliebig positionieren. Es ist von den Styles des Elternelements unabhängig, dadurch ist es robuster. Es kann mit CSS-Selektoren einfacher angesprochen werden (z.B. .parent .icon statt .parent:after/.parent:before). Das Icon ist somit in HTML und CSS ein eigenständiges, beliebig kombinierbares Modul.

Ich habe auf größeren Sites mit beiden Ansätzen gearbeitet. Ich bevorzuge das direkte Einfügen von Icons ohne separates Element, entweder mit Klassen im HTML (z.B. <li class="icon icon-check icon-before">) oder mit extend eines CSS-Präprozessors.

Ich kann allerdings verstehen, wieso CSS-Frameworks mit separaten Icon-Elementen arbeiten. Es passt in das Konzept, wiederverwendbare, in sich geschlossene HTML-/CSS-Module zu bauen. Dabei werden bekannterweise präsentationsbezogene Klassen verwendet. Wenn andere Teammitglieder haufenweise HTML bauen, ohne immer einen Haufen CSS schreiben zu wollen, ist der Toolkit-Ansatz von Bootstrap und Co. unschlagbar.

Die Wahl von i finde ich nicht schlecht. Natürlich steht i nicht für Icon, aber ein leeres span wäre genauso gut/schlecht wie ein leeres i. Da ist ein i wiedererkennbarer, weil man es sonst so gut wie nie verwendet.

Mathias