Cleverer Einsatz von Icon Fonts auf Webseiten

Symbolfonts (Icon-Fonts) für Webseiten gibt es schon lange. Durch die Probleme mit veralteten Browsern haben sie sich erst spät über Projekte wie Bootstrap-CSS durchgesetzt. Flexible Font-Compiler machen den Einsatz noch sinnvoller.

Das Prinzip

Icon Fonts sind normale Schriften, die Symbole beinhalten. Die einzelnen Symbole sind durch eine CSS-Klasse definiert. Der html-code um ein icon darzustellen sieht z.B. so aus.

<span class="icon icon-phone"> 030 1234</span>

oder

<p><span class="icon icon-phone"></span> 030 1234</p>

Beispiel zwei hat den Vorteil, dass man einfacher dem Icon eine eigene Farbe und Größe geben kann.

fontawsomeDie Vorteile

Icon Fonts machen Webseiten schneller und flexibler. Statt hunderte Symbole oder Grafiken muss nur der Zeichensatz und die dazugehörige CSS-Datei geladen werden. Die Anzahl der Anfragen an den Webserver sinkt.

Da die Zeichen quasi Vektoren sind, können sie verlustfrei vergrößert und verkleinert und in der Farbe angepasst werden. Somit tragen sie den Anforderungen an mobilfähige Webseiten Rechnung.

Die Nachteile

Die bekanntesten Iconfonts „ICO-Moon“ und „Font Awesome“ bestehen aus hunderten Symbolen und sind dementsprechend groß. Der komplette Satz inklusive CSS-Definitionen trägt schon mal mit 300 bis 400 KB zur Größe der Seite bei.

Symbole ersetzen keine Bilder. Allerdings sollte man von der Verwendung von Pixelgrafik für die Gestaltung von Webseiten absehen. Die Symbole selbst sind nicht mehrfarbig. aber der Hintergrund ist transparent. In Kombination mit CSS3 können so fast alle Designvorstellungen umgesetzt werden. Trotz allem sollte man auch Font-Icons sparsam und gezielt einsetzen, da allzuviele Symbole eher verwirren.

Optimaler Einsatz durch angepasste Fonts

fontelloUm den ICON-Font nicht zu groß werden zu lassen gibt es Projekte, die es erlauben sich einen individuellen Symbolsatz zusammenzustellen.

Unser Favorit ist das nicht-kommerzielle Projekt Fontello.

Dort kann man recht einfach Zeichen aus verschiedenen Symbolfonts auswählen und das Ergebnis als Paket herunterladen. Die Auswahl kann über json-Dateien jederzeit wieder hergestellt werden. Über eine API kann man den Zeichensatz sogar in Echtzeit austauschen.

fontello screenshot

Verweise