Icon Fonts

written by devangelist on Oktober 17, 2013 in Allgemein and Browser and HTML with no comments

Skalierbare Vektor Icons, personalisierbar in Größe, Farbe, Schatten und alles was so mit CSS machbar ist – das klingt doch sehr verlockend. Vor allem, wenn man bedenkt, dass es immer noch Webentwickler gibt, die einzelne Icons (also nicht CSS-Sprites, davon gibt es auch wirklich tolle Sammlungen, nein, wirklich einzelne! Icons) im Format 16×16 stolz in die Webseite einbauen. Gut, es funktioniert ja auch, also warum sich von den gewohnten Altlasten trennen? Es gibt so einige Gründe dafür, von Performance und Zeitersparnis bis hin zu Flexibilität und Zugänglichkeit. Außerdem gibt es jede Menge verschiedene Icon-Sammlungen, viele davon auch kostenlos.

Die Idee dahinter ist eigentlich ganz einfach, bietet nebenbei noch eine gute Semantik und stellt keine größeren Probleme für Screen-Reader dar. Mal angenommen es soll ein Icon und nebenan ein Wort dargestellt werden, dann wurde dies wie folgt gelöst:

<span class="rss-icon">RSS</span>

RSS-iconDie verwendete Klasse rss-icon hat ein padding-left und ein background-image mit den dementsprechenden Icon. Allerdings möchten wir eine Font-Icon verwenden und dafür eines der Pseudo-Elemente (:before oder :after), zusammen mit der content-Eigenschaft verwenden. Allerdings dabei gibt es ein Problem: Einige Screen-Reader lesen den Content, der über diesen Weg erstellt wurde.

Dafür gibt es allerdings eine recht saubere Lösung: Zum einen wird das Attribut aria-hidden verwendet (reicht für VoiceOver auf OSX immer noch nicht aus) und dazu die eben genannten Pseudo-Elemente:

<span>
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  RSS
</span>
[data-icon]:before {
  font-family: icons;
  content: attr(data-icon);
  speak: none;
}

Mit der content-Eigenschaft wird dem Element der Content zugewiesen, welcher im HTML5-kompatiblen data-Attribut steht. Für Standalone-Icons, also jene ohne begleitenden Text, reicht es allerdings nicht aus, einfach den Text wegzulassen, denn dabei könnten die Screen-Reader  das Icon nicht mehr erkennen. Um dieses Problem zu lösen, sollte der Text für den Besucher unsichtbar dargestellt werden, um somit nur für Screen-Reader lesbar zu sein:

<a href="#">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader">RSS</span>
</a>
.screen-reader {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Na also, das ist doch wirklich einfach, oder?

Icon Fonts: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkte, 1 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.