Iconfonts – Webdesign mit vektorbasierten Piktogrammen

Die Lupe neben dem Suchfeld, der Einkaufswagen im Onlineshop oder der Briefumschlag neben der E-Mail-Adresse – Icons finden sich nahezu auf jeder Website. Sie bieten Nutzern eine Orientierungshilfe, verdeutlichen die Funktion von Bedienelementen und kommen dabei ohne Worte aus. Immer seltener jedoch werden Icons als Bitmap-Bilder oder CSS-Sprites eingebunden. Webentwickler greifen stattdessen auf Iconfonts zurück. Bei einem Iconfont handelt es sich um einen Webfont, der statt Buchstaben vektorbasierte Piktogramme enthält. Gegenüber Zeichendarstellungen, die durch Bildpunkte innerhalb einer Bitmap beschrieben werden, bieten Vektor-Icons den Vorteil, dass sie sich verlustfrei skalieren lassen und dennoch eine geringere Dateigröße aufweisen als Pixel-Icons. Zudem können Iconfonts durch CSS (Cascading Style Sheets) beliebig ausgestaltet werden. Aufgrund der auflösungsunabhängigen Skalierung werden vektorbasierte Icons auch auf hochauflösenden Displays gestochen scharf dargestellt – im Gegensatz zu Bitmap-Grafiken jedoch nur einfarbig (CSS3 ermöglicht auch Farbverläufe). Zudem muss immer ein kompletter Iconfont eingebunden werden, selbst wenn nur ein Piktogramm verwendet wird. Im Internet findet man zahlreiche Anbieter, die kostenlose Iconfonts zur Verfügung stellen. Zudem lassen sich Fontkits mit geringem Aufwand selbst erstellen. 

In der Regel benötigen Webentwickler nicht alle Piktogramme eines Iconfonts. Üblich ist eine Kombination von Icons verschiedener Anbieter auf einer Webseite. Möglich machen dies sogenannte Fontkits, die sich mit Webfont-Generatoren wie Fontello, fontastic.me oder der IcoMoon App aus verschiedenen Quellen zusammenstellen lassen. Ein individuelles Fontkit hat den Vorteil, dass nur die Icons per Webfont eingebunden werden, die tatsächlich auf der Webseite zu sehen sind. Dies reduziert die Dateigröße und somit die Ladezeit einer Webseite. 

Iconfonts werden in der Regel mithilfe einer CSS-Klasse im HTML-Quellcode definiert. Dazu muss der entsprechende Iconfont im Head-Bereich des HTML-Dokuments eingebunden werden. Einige Anbieter stellen dazu eine Standard-CSS-Datei bereit. Möglich ist zudem eine Einbindung über das CSS-Framework Bootstrap, sofern der Font dieses unterstützt. Wie man HTML Icons einbindet, zeigt der vertiefende Artikel zum Thema beispielhaft für den Iconfont Font Awesome.

Da Iconfonts über ein eigenes Stylesheet geladen und über vordefinierte CSS-Klassen abgerufen werden, bieten sie weitreichende Möglichkeiten der Ausgestaltung. Im Gegensatz zu pixelbasierten Grafikdateien lassen sich Piktogramme auf Vektorbasis, die über Iconfonts eingebunden werden, bequem durch Änderungen im CSS-Code definieren. So passen Webentwickler die Größe, Farbe oder Deckkraft eines Icons individuell an die jeweilige Website an. Zudem ist es möglich, Icons mit Texturen oder Schatteneffekten auszugestalten.