Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Visuelle Semantik neu entdecken

Icon Fonts

Visuelle Semantik neu entdecken

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.

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:

BeschreibungZeichenUnicode (hex)Escaped Unicode für CSSIcon als Fallback für…
Pfeil nach Rechts→\2192…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. Icons z. B. für Twitter, Google+, Facebook und ähnlichem wird der Webdesigner dort noch 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 Navigation 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 Navigation 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.

  1. @font-face {
  2.   font-family: 'fontello';
  3.   src:url('fonts/fontello.eot');
  4.   src:url('fonts/fontello.eot?#iefix') format('embedded-opentype'),
  5.     url('fonts/fontello.svg') format('svg'),
  6.     url('fonts/fontello.woff') format('woff'),
  7.     url('fonts/fontello.ttf') format('truetype');
  8.   font-weight: normal;
  9.   font-style: normal;
  10. }

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
IE7.0 +9.0 + (teilweise)9.0 +Nein
FirefoxNeinJaJaNein
ChromeNeinJaJaJa
SafariNeinJaJaJa
OperaNeinJaJaJa
iOS SafariNeinJaJaJa
Opera MiniNeinNeinNeinNein
Android BrowserNeinJaNeinJa
Blackberry BrowserNeinJaNeinJa
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), die 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 einem Javascript-Polyfill, das über Conditional Comments eingebunden wird.

Ausgabe in Einheit mit einem beschreibenden Text

Im CSS:

  1. [class^="icon-"]:before, [class*=" icon-"]:before {
  2.   font-family: 'fontello';
  3.   speak: none;
  4.   -webkit-font-smoothing: antialiased;
  5. }
  6.  
  7. .icon-left:before {
  8.   content: '\2190'; } /* '←' */
  9. }
  10.  
  11. .icon-home:before {
  12.   content: '\2302'; } /* '⌂' */

Im HTML:

  1. <a href="/link/" title="Beschreibung des Icons">
  2.   <span class="icon-left" aria-hidden="true"></span>
  3.   zurück
  4. </a>
  5.  
  6. <h3 class="icon-wrench">
  7.   <span class="icon-home" aria-hidden="true"></span>
  8.   Home
  9. </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 dass der erklärende Text versteckt wird. Das CSS braucht dafür nur um eine Klasse erweitert zu werden…

  1. .hide {
  2.   text-indent: 100%;
  3.   white-space: nowrap;
  4.   overflow: hidden;
  5. }

Und der Text im HTML entsprechend ausgezeichnet…

  1. <a href="/link/" title="Beschreibung des Icons">
  2.   <span class="icon-comments" aria-hidden="true"></span>
  3.   <span class="hide">Kommentare</span>
  4. </a>
  5.  
  6. <h3 class="icon-wrench">
  7.   <span class="icon-wrench" aria-hidden="true"></span>
  8.   <span class="hide">Einstellungen</span>
  9. </h3>
Screenshot von fontello
fontello

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.

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.

Kommentare

Gunnar Bittersmann
am 10.12.2012 - 08:54

Icon Fonts bringen den immensen Vorteil verlustfreier Skalierung und scharfer Darstellung …

Das tun SVG-Icons auch. Font-Icons bieten den Vorteil, dass man bspw. bei :hover und :focus einfach die (Text-)Farbe ändern kann.

… sogar auf Retina-Displays

Besonders auf Retina-Displays. Auf nichthochauflösenden Displays dürften richtig gehintete Rastergrafiken schärfer erscheinen (in Originalgröße, nicht skaliert).

Escaped Unicode für CSS

Dazu wäre anzumerken, dass Zeichenreferenzen in CSS mit Leerzeichen abgeschlossen werden, welches unter bestimmten Bedingungen entfallen darf (analog zum Semikolon bei Zeichenreferenzen in HTML), s.a. meine Randbemerkung.

Das CSS und HTML sieht genauso aus wie das obige, nur dass der erklärende Text versteckt wird. Das CSS braucht dafür nur um eine Klasse erweitert zu werden…

Es ist keine Klasse "hide" im Markup notwendig. Man kann alle span-Nachfahren des Icon-Containers verstecken und das eine span, was das Icon enthält, anzeigen.

Permanenter Link
Henry Zeitler

Henry Zeitler (Autor)
am 10.12.2012 - 13:52

Danke für die Anmerkungen.

Font-Icons bieten den Vorteil, dass man bspw. bei :hover und :focus einfach die (Text-)Farbe ändern kann.

Nicht nur das. Es können z. B. auch Textformatierungen und Effekte wie text-shadow angewendet werden.

Permanenter Link

Sven Wolfermann
am 10.12.2012 - 12:05

Kurzer Hinweis zum Browsersupport: IE9 mobile unterstützt leider keine Webfonts. Hier also auch an die Fallbackschriftart und die Laufweiten achten.

Permanenter Link
Henry Zeitler

Henry Zeitler (Autor)
am 10.12.2012 - 13:53

Danke, guter Hinweis!

Permanenter Link
Michael van Laar

Michael van Laar (Webkraut)
am 10.12.2012 - 15:01

Super Artikel. Da muss ich wohl die Icons auf meiner eigenen Website auch noch in <span>-Container packen, um das Attribut aria-hidden verwenden zu können. Schade, dass die CSS-Anweisung speak: none; aktuell noch von keinem Browser oder Screenreader unterstützt wird. Dann könnte man sich das zusätzliche <span>-Element auch sparen.

Permanenter Link

Gunnar Bittersmann
am 10.12.2012 - 16:47

Warum sollte ein visueller Browser auch speak unterstützen? Ein akustischer Browser sollte das tun, aber gibt es solche?
Screenreader sind keine, sondern Zusatzprogramme zum Vorlesen, was ein visueller Browser anzeigt. AFAIK können sie somit auch nicht auf Medientypen speech oder aural reagieren.

Permanenter Link

Eric Eggert
am 11.12.2012 - 02:21

Genau, speak kann man eigentlich einfach vergessen. Immer die Private Use Area nutzen, dann wird der Buchstabe auch nicht vorgelesen :-)

Permanenter Link

Lena Dronowa
am 10.12.2012 - 19:20

Vielen Dank für diesen Artikel!
Ja, Visualisierung ist anziehend! ツ
Leider werden Icons nicht in allen mobilen OS dargestellt. HIer ist die Übersicht (ganz unten im Artikel) in welchen Mobile OS, was unterstützt wird:
A Guide to Using Pictograms in Mobile Applications http://mobiforge.com/designing/story/a-guide-using-pictograms-mobile-app...

Permanenter Link
Henry Zeitler

Henry Zeitler (Autor)
am 10.12.2012 - 21:32

Danke, eine sehr gute Ergänzung! Das unterstreicht noch einmal die Notwendigkeit einer Ersatzlösung (Fallback).

Permanenter Link
Henry Zeitler

Henry Zeitler (Autor)
am 14.12.2012 - 06:26

Nachtrag: Dieser Artikel ist vom 11. Oktober 2012 und gibt ebenfalls einen guten Überblick auf welchen gängigen Devices und Browsern @font-face unterstützt wird. Testing @font-face Support on Mobile and Tablet

Permanenter Link

Die Kommentare sind geschlossen.