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:
<link rel="stylesheet" href="https://www.ionos.de/digitalguidepath/to/font-awesome/css/font-awesome.min.css"> |
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:
<i class="fa fa-home"></i> |
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.