So betten Sie einen Iconfont in ihr HTML-Dokument ein

Wie im Grund­la­gen­ar­ti­kel "Iconfonts – Webdesign mit vek­tor­ba­sier­ten Pik­to­gram­men" be­schrie­ben handelt es sich bei Iconfonts um vek­tor­ba­sier­te Schrift­ar­ten, die statt Buch­sta­ben funk­tio­na­le Pik­to­gram­me enthalten. Web­ent­wick­ler, die sich dazu ent­schei­den, Iconfonts zu nutzen, pro­fi­tie­ren in vollem Umfang von den Vorteilen frei ska­lier­ba­rer Vektoren. Im Gegensatz zu Pi­xel­fonts werden Vek­tor­fonts un­ab­hän­gig vom Aus­ga­be­ge­rät in gra­fi­schen Pri­mi­ti­ven wie Linien, Kreisen, Polygonen oder Kurven definiert. Dies er­mög­licht eine bequeme und ver­lust­freie Trans­for­ma­ti­on auf Basis von CSS. Ent­spre­chen­de Icons müssen so nicht separat in ein Gra­fik­pro­gramm geladen und angepasst werden. Statt­des­sen erfolgt die For­ma­tie­rung code­ba­siert im Web­brow­ser. Dazu muss eine dem Iconfont zugrunde liegende CSS-Datei im HTML-Header ein­ge­bun­den werden. Einzelne Icons lassen sich an­schlie­ßend durch das HTML-Attribut „class“ in die Webseite in­te­grie­ren. Wie das funk­tio­niert, zeigen wir im Folgenden bei­spiel­haft für den beliebten Open-Source-Font Font Awesome.

Mit mehr als 600 Icons ist Font Awesome eine der größten Samm­lun­gen vek­tor­ba­sier­ter Symbole. Sie steht als pik­to­gra­fi­sche Schrift kostenlos zur Verfügung. Um den Iconfont in eine Webseite ein­zu­bet­ten, benötigen Web­ent­wick­ler das In­stal­la­ti­ons­pa­ket. Dieses steht auf der Font-Awesome-Website zum Download bereit. Die In­te­gra­ti­on des Iconfonts erfolgt in drei Schritten:

1. Download des In­stal­la­ti­ons­pa­kets

2. Ein­bin­dung des Style­sheets in den Header des ge­wünsch­ten HTML-Dokuments: Um Font Awesome in eine Webseite ein­zu­bin­den, muss das ent­spre­chen­de HTML-Dokument mit der im In­stal­la­ti­ons­pa­ket ent­hal­te­nen Standard-CSS-Datei „font-awesome.min.css“ verknüpft werden. Dazu wird folgender Code in den HTML-Header ein­ge­bet­tet:

Der Platz­hal­ter "path/to/" steht stell­ver­tre­tend für den Dateipfad des Web­pro­jekts auf dem Server.

3. Icons einbetten: Ist der Bezug zur CSS-Datei her­ge­stellt, lassen sich die im Iconfont be­schrie­be­nen Pik­to­gram­me an be­lie­bi­ger Stelle des HTML-Quell­codes einbinden. Dazu kommt bei Font Awesome ein leeres i-Element in Kom­bi­na­ti­on mit dem class-Attribut zum Einsatz. Die Klassen ergeben sich aus dem CSS-Präfix „fa“ und dem je­wei­li­gen Icon-Namen:

Der Ein­bet­tungs­code eines jeden Icons lässt sich der Font-Awesome-Website entnehmen. 

Al­ter­na­tiv zum i-Element kann ein Icon auch über ein se­man­tisch leeres span-Tag ein­ge­bet­tet werden.