Skalierbare Icons als Web-Font

Viele Webseiten benutzen verschiedene Icons um beispielsweise einen Download-Link oder einen E-Mail-Link zu visualisieren. Dazu verwendet man in der Regel kleine Grafiken. Diese haben jedoch den Nachteil, dass sie nur schwer skalierbar sind. In diesem Artikel erkläre ich, wie du dieses Problem einfach mit einer Web-Font lösen kannst.

 

Vorteil der Web-Font Lösung

Das Einbinden der Icons als Web-Font hat den Vorteil, dass die Icons nun beliebig skalierbar sind. Dadurch kannst du sie perfekt für das Responsive Webdesign anpassen, bspw. für extrem hochauflösende Bildschirme oder auf mobilen Endgeräten. Darüber hinaus lassen sie sich auch mit allen CSS-Effekten versehen. So lassen sie sich so noch besser in das bereits bestehendes Design deiner Website einbinden.

 

Welches Web-Font soll ich verwenden?

Sehr zu empfehlen ist das Icon Font Set „Font Awesome“ von Dave Gandy. Mit diesem Set hast du die Auswahl aus über 600 Icons. Darüber hinaus ist diese Web-Font kompatibel zu Bootstrap. Es ist kompatibel mit Screenreadern und per CSS veränderbar (zum Beispiel Farbe, Effekte, etc.). Darüber hinaus ist es außerdem Open Source. Auch für den kommerziellen Einsatz kannst du das Icon-Pack dank GPL Lizenz völlig kostenfrei verwenden.

 

Einbindung in die Website

Um „Font Awesome“ in die eigene Webseite einzubinden, musst du nicht viel tun. Du brauchst lediglich das Paket auf deinen Webserver laden. Danach erfolgt die Einbindung in die Website via CSS.

 

Beispiel:

<link rel="stylesheet" href="../css/font-awesome.css">

 

Danach lassen sich die entsprechenden Icons einfach per CSS-Klasse je nach Wunsch einbinden.

 

Beispiel:

<p><i class="fa fa-download"></i>Datei Downloaden</p>

 

Die Beschreibung der einzelnen Klassen sowie eine Übersicht über alle vorhandenen Icons findest du auf der Webseite des Entwicklers.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.