Icon Fonts. Visuelle Semantik neu entdecken

von Henry Zeitler

Icons sind, wenn richtig eingesetzt, bedeutungsvoll und intuitiv. Sie führen den Benutzer einer Website zur gewünschten Aktion und sind somit ein wichtiger Blickfang. Heute, in Zeiten der Optimierung für Mobile-Devices und besonders des Responsive Webdesigns erfahren die Icons als Fonts eine Renaissance.

Dieser Artikel erschien am 10. Dezember 2012 bei den Webkrauts.

Das Prinzip des Icon Fonts ist eigentlich kein neuartiges Phänomen. Der Grundstein wurde mit Wingdings für Desktops bereits im Jahre 1990 gelegt und Webdings wurden 1997 von Microsoft für das Internet entwickelt. Das ist zwar schon länger her, aber gerade in den letzten Monaten haben sich diverse Anbieter von Icon Fonts bei den Webworkern etabliert und immer öfter begegnen wir ihren Produkten auf modernen Webseiten.

Die Gründe für das neu geweckte Interesse sind auch verknüpft mit den Diskussionen über Optimierung für Mobile Devices und Responsive Webdesign, denn Icon Fonts bringen den immensen Vorteil verlustfreier Skalierung und scharfer Darstellung sogar auf Retina-Displays und sind gegenüber Grafiken performanter. Sie ersparen dem Webdesigner die Erstellung verschiedener grafischer Icon-Sets und Sprites für die unterschiedlichen Bildschirmauflösungen und garantieren somit Nachhaltigkeit. Abgesehen davon lassen sie sich über CSS einbinden und stylen, mit allen Mitteln, die auch einem normalen Font zur Verfügung stehen.

Screenshot von IcoMoon
IcoMoon

Von Unicode-Sonderzeichen, Fallbacks und PUA – ein kurzer Exkurs

Der Nährboden der Sonderzeichen und Icon Fonts ist der Unicode-Zeichensatz, bzw. die für das Internet gebräuchliche Kodierung UTF-8. Unicode bildet grundsätzlich den Standard für gebräuchliche Schriftzeichen, Ziffern und textliche Symbole aller Kulturen weltweit und es liefert bereits von Hause aus einen Grundstock von Icons bzw. Sonderzeichen.

Die Darstellung bzw. Implementierung der Icon Fonts geschieht demnach über die Unicode Zeichenkodierung und deren Codepunkte. Es wird entweder ein bereits belegter Code überschrieben oder ein freier (z. B. aus der Private Use Area, kurz PUA) benutzt. Für einige Zeichen in den Icon Fonts gibt es folglich bereits entsprechende Äquivalente in Unicode dessen Codepunkte dann auch benutzt werden sollten. Auf diese Weise wird gewährleistet, dass ein Zeichen mit ähnlicher Darstellung angezeigt wird wenn die Einbindung des Icon Fonts versagt. Ein Fallback.

Beispiele für vorhandene Symbole, deren Codepunkte von Icon Fonts genutzt werden:

Beschreibung Zeichen Unicode (hex) Escaped Unicode für CSS Icon als Fallback für…
Pfeil nach Rechts → \2192 hellip;Pfeile nach rechts. Z. B. für “weiterlesen”, “nächste Seite”, “abschicken”.
Haken ✓ \2713 …Zeichen für “erledigt” oder “vorhanden” bzw. “auf Lager”. Wird oft auch als Listenpunkt eingesetzt.
Briefumschlag ✉ \2709 …für E-Mail Adressen. Kann auch auf einen Abschicken-Button hinweisen.
Weißer Stern ✩ \2729 …nicht erzielte Bewertungen. Wird z. B. im Zusammenhang mit Rich Snippets und dem 5-Sterne-System benutzt.
Schwarzer Stern ✭ \272D …erzielte Bewertungen oder Favoriten.

Neben gängigen Symbolen wie Pfeile, Sterne und Smileys gibt es Icons, die (noch) nicht in Unicode vorkommen. Z. B. Icons für Twitter, Google+, Facebook und ähnlichem wird der Webdimmer öftersesigner dort vergebens suchen. Für Zwecke dieser Art stellt das Unicode-Konsortium den Bereich U+E000 bis U+F8FF (Escaped: \E000 bis \F8FF) zur Verfügung, der als PUA (Private Use Area) bezeichnet wird und in dem sich die Entwickler austoben können. In dieser sogenannten Range sind keine Zeichen hinterlegt und somit wird auch nichts angezeigt wenn der Icon Font versagen sollte. Hier leben die meisten Icons der Icon Fonts.

Icon Fonts richtig in das CSS einbinden und im HTML ausgeben

Screenshot der Navi von benfrain.com
Navigation mit Icon-Font von benfrain.com

Bei der Benutzung und Einbindung von Icon Fonts gibt es ein paar Dinge, die unbedingt beachtet werden sollten. Der Webdesigner sollte sich darüber im Klaren sein, dass ein Icon dieser Art lediglich von visueller semantischer Bedeutung ist und deshalb seine Information verfällt wenn es nicht angezeigt wird. Deswegen muss dafür gesorgt werden, dass ein Alternativtext hinterlegt wird, der auch von Screenreadern vorgelesen wird und das Icon und seine Funktion beschreibt.

Screenshot der Navi von css-tricks.com
Navigation mit Icon-Font von css-tricks.com

Ein Icon Font wird grundsätzlich über die Regel @font-face eingebunden, da es wie eine herkömmliche Schriftart im Stylesheet behandelt wird. Die Zeichen des Icon Fonts werden dann einfach über die in den Schriftdateien festgelegten Codepunkte gemappt und somit ausgetauscht. Hier ein Beispiel anhand des Anbieters fontello.


@font-face {
	font-family: 'fontello';
	src:url('fonts/fontello.eot');
	src:url('fonts/fontello.eot?#iefix') format('embedded-opentype'),
		url('fonts/fontello.svg') format('svg'),
		url('fonts/fontello.woff') format('woff'),
		url('fonts/fontello.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

Das Zurücksetzen von Font-weight und Font-style auf normal gewährleistet eine qualitativ optimale Darstellung der Icons. Das gleiche gilt im Übrigen auch für Schriften, die über @font-face eingebunden werden. Diese besitzen meistens eine eigene Type für Fettschrift und reagieren auf Faux-Fett mit unschönem Rendering.
Um eine browserübergreifende Darstellung zu gewährleisten empfiehlt es sich insgesamt vier Schriftformate einzubinden. Die Formate eot (PostScript-flavoured) und ttf (TrueType-flavoured) sind Ausprägungen der OpenType-Schriften und bedienen eher ältere Browser, woff (Web Open Font Format) wird von den meisten modernen Browsern unterstützt und das svg-Fontformat auch von Webkit und Opera (leider nicht Opera Mini). Hier eine kleine Übersicht:

Browser .eot .ttf .woff .svg
IE 7.0 + 9.0 + (teilweise) 9.0 + Nein
Firefox Nein Ja Ja Nein
Chrome Nein Ja Ja Ja
Safari Nein Ja Ja Ja
Opera Nein Ja Ja Ja
iOS Safari Nein Ja Ja Ja
Opera Mini Nein Nein Nein Nein
Android Browser Nein Ja Nein Ja
Blackberry Browser Nein Ja Nein Ja
Quelle: caniuse.com

Die Ausgabe mit :before und :after

Für die Darstellung der Icons gibt es zwei Szenarien. Einmal vor oder hinter (bzw. über oder unter) einem sichtbaren Text oder eine Stand-alone-Ausgabe mit einem versteckten Alternativtext für Screenreader oder für die wenigen Browser, die keine Icon Fonts anzeigen können. Egal welche Darstellung gewählt wird, die Ausgabe erfolgt in erster Linie über den Selektor :before, in manchen Fällen auch über :after.

Das sogenannte Pseudoelement generiert in Verbindung mit der Eigenschaft content über das Stylesheet zusätzliche Inhalte im DOM (Document Object Model), welche im Quelltext aber nicht sichtbar sind. Daher die Bezeichnung Pseudolelement. Pseudoelemente und ihre hier beschriebenen Eigenschaften :before und :after sind Bestandteil des CSS3 Generated and Replaced Content Module.

Leider kennt der IE7 und darunter die Pseudoelemente nicht und die meisten Anbieter von Font Icons liefern deshalb für diese Browser einen Hack. fontello.com löst das Problem für den IE7 mit *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '← '); im externen Stylesheet, icomoon.io unterstützt den IE6 und 7 mit einer Javascript-Polyfill, das über Conditional Comments eingebunden wird.

Ausgabe in Einheit mit einem beschreibenden Text

Im CSS:


[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: 'fontello';
	speak: none;
	-webkit-font-smoothing: antialiased;
}
.icon-left:before {
	content: "\2190'; } /* '←' */
}
.icon-home:before { 
	content: '\2302'; } /* '⌂' */

Im HTML:


<a href="/link/" title="Beschreibung des Icons">
	<span class="icon-left" aria-hidden="true"></span>
	zurück
</a>

<h3 class="icon-wrench">
	<span class="icon-home" aria-hidden="true"></span>
	Home
</h3>

Diese Methode ist sehr anwenderfreundlich. Der Text beschreibt die Funktion des Icons und sollte das mal nicht angezeigt werden, bleibt er als Verlinkung bestehen. Es darf auch nicht vergessen werden, dass nicht jeder Besucher einer Website das Zeichen für ein RSS-Feed oder das Symbol für Twitter sofort zuordnen kann. Dank gebührt an dieser Stelle Chris Coyier, der hier das Attribut aria-hidden ins Spiel gebracht hat um in Kombination mit dem Pseudo-Element :before (oder :after) das Icon vor allen Screenreadern zu verstecken (Icons vorlesen zu lassen ist nämlich keine gute Idee).

Ausgabe als Stand-alone

Will der Webdesigner lieber auf den Text verzichten und nur ein Icon ausgeben, sollte er nicht vergessen die Bedeutung und Funktion an Screenreadern und Suchmaschinen zu vermitteln. Das CSS und HTML sieht genauso aus wie das obige, nur das der erklärende Text versteckt wird. Das CSS braucht dafür nur um eine Klasse erweitert zu werden…


.hide {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

Und der Text im HTML entsprechend ausgezeichnet…

<a href="/link/" title="Beschreibung des Icons"> <span class="icon-comments" aria-hidden="true"></span> <span class="hide">Kommentare</span> </a> <h3 class="icon-wrench"> <span class="icon-wrench" aria-hidden="true"></span> <span class="hide">Einstellungen</span> </h3>

Quellen für Icon Fonts

Fontello – iconic fonts scissors
Lizenz: IMT. Alle Icons auf fontello.com sind kostenlos.
IcoMoon, Custom Built and Crisp Icon Fonts, Done Right
Lizenz: CC License (CC BY-SA 3.0) für kostenlose und Developer Friendly License für die kostenpflichtigen Packages. icomoon.io hat einen eigenen Editor um die Icons anzupassen und bietet ein IDN (Icon Delivery Network) an.
Foundation Icon Fonts 2!
Lizenz: MIT Open Source License. Die Icon-Sets der ZURB-Foundation, einer Design-Agentur aus Campbell, Kalifornien.
Flat Icons & Icon Fonts
Schöner Überblick über Icon-Fonts von Chris Coyier.

Screenshot von fontello
fontello

Icon Fonts selbst erstellen

Wer keine Icons von der Stange haben will und über viel Zeit und Kreativität verfügt, dem sei geholfen. Einige Vektorprogramme wie z. B. Inkscape bieten spezielle Editoren für Vektor-Fonts bzw. Icons an. Ein Tutorial zur Erstellung eigener Icons bietet Webdesigners Depot mit How to make your own icon webfont.

Über die App von IcoMoon lassen sich eigene Icons importieren.

comments powered by Disqus