So betten Sie einen Iconfont in ihr HTML-Dokument ein

Wie im Grundlagenartikel "Iconfonts – Webdesign mit vektorbasierten Piktogrammen" beschrieben handelt es sich bei Iconfonts um vektorbasierte Schriftarten, die statt Buchstaben funktionale Piktogramme enthalten. Webentwickler, die sich dazu entscheiden, Iconfonts zu nutzen, profitieren in vollem Umfang von den Vorteilen frei skalierbarer Vektoren. Im Gegensatz zu Pixelfonts werden Vektorfonts unabhängig vom Ausgabegerät in grafischen Primitiven wie Linien, Kreisen, Polygonen oder Kurven definiert. Dies ermöglicht eine bequeme und verlustfreie Transformation auf Basis von CSS. Entsprechende Icons müssen so nicht separat in ein Grafikprogramm geladen und angepasst werden. Stattdessen erfolgt die Formatierung codebasiert im Webbrowser. Dazu muss eine dem Iconfont zugrunde liegende CSS-Datei im HTML-Header eingebunden werden. Einzelne Icons lassen sich anschließend durch das HTML-Attribut „class“ in die Webseite integrieren. Wie das funktioniert, zeigen wir im Folgenden beispielhaft für den beliebten Open-Source-Font Font Awesome.

Mit mehr als 600 Icons ist Font Awesome eine der größten Sammlungen vektorbasierter Symbole. Sie steht als piktografische Schrift kostenlos zur Verfügung. Um den Iconfont in eine Webseite einzubetten, benötigen Webentwickler das Installationspaket. Dieses steht auf der Font-Awesome-Website zum Download bereit. Die Integration des Iconfonts erfolgt in drei Schritten:

1. Download des Installationspakets

2. Einbindung des Stylesheets in den Header des gewünschten HTML-Dokuments: Um Font Awesome in eine Webseite einzubinden, muss das entsprechende HTML-Dokument mit der im Installationspaket enthaltenen Standard-CSS-Datei „font-awesome.min.css“ verknüpft werden. Dazu wird folgender Code in den HTML-Header eingebettet:

Der Platzhalter "path/to/" steht stellvertretend für den Dateipfad des Webprojekts auf dem Server.

3. Icons einbetten: Ist der Bezug zur CSS-Datei hergestellt, lassen sich die im Iconfont beschriebenen Piktogramme an beliebiger Stelle des HTML-Quellcodes einbinden. Dazu kommt bei Font Awesome ein leeres i-Element in Kombination mit dem class-Attribut zum Einsatz. Die Klassen ergeben sich aus dem CSS-Präfix „fa“ und dem jeweiligen Icon-Namen:

Der Einbettungscode eines jeden Icons lässt sich der Font-Awesome-Website entnehmen. 

Alternativ zum i-Element kann ein Icon auch über ein semantisch leeres span-Tag eingebettet werden.