Icon Fonts

Zur Gestaltung einer Webseite werden oft Icons benutzt; kleine, einfache Grafiken wie ein Pfeil oder ein Briefumschlag. Um auf allen Geräten zum Layout zu passen – Stichwort “Responsive Design” müssen diese Icons oft in verschiedenen Größen und Farben vorliegen. Wäre es nicht toll diese Icons ganz einfach über CSS-Eigenschaften anzupassen? Kein Problem mit Icon Fonts.

Was sind Icon Fonts?

Icon Fonts sind spezielle Unicode-Schriftarten, die keine Buchstaben sondern kleine Bilder (sog. Glyphen) enthalten. Wie bei den normalen Schriften werden die entsprechenden Codes für die Darstellung ausgelesen und auf ein bestimmtes Element im Font gemappt. Die Icons sind meist in Form von Vektorgrafiken in den Fonts eingebettet und beliebig skalieren werden. Wie bei ganz normalen Schriftarten oder Webfonts auch kann die Farbe der Darstellung mit color gesetzt werden. Beim Erstellen eines Icon Fonts sollte darauf geachtet werden, dass die Glyphen in der Schrift auf PDU (Private Use Area) im Unicode gemappt sind um Kollisionen mit Buchstaben und damit Komplikationen zu vermeiden.

Vorteile von Icon Fonts

Wie schon geschrieben, können Icon Fonts beliebig skaliert werden und sehen niemals pixelig aus. Damit entfällt der ganze icon01_16x16, icon01_32x32 … Wust sowie der damit verbundene Workflow.

Wie bei der Verwendung von CSS Sprites wird die Anzahl der Request an den Server zum Laden der Icons auf ein Minimum reduziert da diese nicht einzeln angefragt werden müssen.

Auch im Punkt Barrierefreiheit können Icon Fonts punkten: Bei der Invertierung der Darstellung (helle Schrift auf schwarzem Grund) werden die Glyphen schlicht ebenfalls invertiert – bei normalen Grafiken bleibt nur ein schwarzer Kasten zurück…

Implementierung

Hat man bereits eine Schrift in den gängigen Formaten vorliegen kann es direkt weitergehen. Ansonsten findet man am Ende des Artikels ein paar hilfreiche Seiten um an Icon Fonts und Glyph Packs zu gelangen.

Icon Fonts können auf viele verschiedene Wege in eine Webseite eingebaut werden. Ich möchte hier auf die 2 gängigsten Methoden eingehen. Für beide Methoden muss die Schrift via CSS eingebettet werden:

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

Wie fast überall ist auch hier eine Sonderbehandlung für die Problemkinder unter den Browsern notwendig.

Bei der Verwendung der Glyphen kann entweder alles mittels CSS gelöst werden oder ein data-Attribut im HTML verwendet werden.

Die CSS Methode

Hier wird mit einer Klasse für jede Glyphe gearbeitet. Sie werden über die Pseudoklasse :before und das CSS content: Attribut eingebunden.

Der Internet Explorer unterstützt diese Methode erst ab Version 8. Da der Weltmarktanteil von IE 7 inzwischen deutlich unter 1% liegt, sollte das kein so großes Problem sein.

<p class="icon icon-example">play</p>

.icon {
	font-family: 'Iconfont';
}

.icon-example:before {
	content: "\e600";
}

Ein data-* Attribut benutzen

In HTML5 kann ein data-*  Attribut im Tag erzeugt werden, worin der Wert für das Icon gespeichert wird. In diesem Fall wird nur eine CSS-Klasse benötigt.

<p><span data-icon="&#xe600"></span>play</p>

[data-icon]:before {
  font-family: 'Iconfont';
  content: attr(data-icon);
}

Gestaltung der Icons mit CSS

Icon Fonts können nach Belieben angepasst werden wie jede andere Schriftart auch. Hierzu zählt beispielsweise auch der Textschatten.

Ein Beispiel um die Farbe und die Größe der Icons zu verändern:

<p class="icon icon-example color big">play</p>

<p><span class="color big" data-icon="&#xe600"></span>play</p>

.color {
    color: red;
}

.big {
    font-size: 2em;
}

Das ist natürlich nur eine sehr einfache Variante um die Veränderung über CSS demonstrieren. Aber es sollte deutlich sein, wie flexibel sich Icon Fonts verwenden lassen.

Hilfreiche Seiten

Font Awesome hat ein sehr schönes Paket mit über 350 Icons.

Icomoon bietet einen guten Service an. Hier kann man sich eigene Icon Fonts aus verschiedenen Paketen selbst zusammen stellen und herunterladen. Auch das CSS wird mitgeliefert.

CSS-Tricks hat eine sehr große Liste mit kommerziellen und freien Icon Fonts und anderen hilfreichen Seiten.