Icon gesucht, Font Awesome

Icons gesucht? Font Awesome!

Kostenlose, wie kostenpflichtige Icon-Sets findet man im Web wie Sand am Meer. Doch nicht immer findet man sofort das Gesuchte. Viele Icons liegen als Pixel-Grafik vor und sind daher nicht ohne Weiteres skalierbar. Dabei benötigt man das Icon vielleicht an anderer Stelle noch einmal viel größer – und die nervenaufreibende Suche nach der passenden Grafik beginnt von neuem.

Zwar liegen zahlreiche Icons mittlerweile als SVG vor, doch wenn es beispielsweise darum geht, die Farbe anzupassen, ist der Weg über einen Icon-Font häufig die bessere Wahl. Der Grund: Schriften lassen sich einfach per CSS ansprechen.

Der „geniale“ Font

Der Icon-Font „Font Awesome“ von Dave Gandy gehört zu den beliebtesten im Web. In der aktuellen Version 4.7 liegen 675 Icons für jeden erdenklichen Anwendungszweck vor. Neben üblichen, in beinahe jeder Webapplikation verwendeten Icons für Checkboxen, Close-Buttons, Vor- und Zurück-Pfeile, finden sich auch solche für seltenere Anwendungszwecke, z.B. für die Video-Navigation. Auch Social Media-Icons sind in der Sammlung selbstverständlich vertreten.

Bequemes Einbinden per CSS

Die Verwendung des Fonts ist denkbar einfach. Die Dateien können wahlweise per CDN eingebunden oder heruntergeladen werden. Anschließend genügt eine Referenz auf die CSS-Datei im <head> der HTML-Datei, um den Font einzubinden.

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

Der geneigte Webentwickler würde sich nun an dieser Stelle die Frage stellen, ob denn Schriften sonst nicht in der Regel über @font-face angebunden werden. Doch genau das übernimmt die hier eingebundene CSS-Datei. Im Quellcode selbst brauchen dann nur noch die entsprechenden CSS-Klassen vergeben werden:

<i class="fa fa-car"></i>

Über CSS-Parameter wie color oder font-size lassen sich bequem Größe oder Farbe der Icons anpassen. Auf der Webseite von Font Awesome finden sich weitere Beispiele, wie die Icons genutzt werden können.

Font Awesome ist Open-Source

Ein gewichtiger Vorteil bei der Verwendung des Fonts ist die Lizenzierung. Der Font selbst steht unter der SIL-, die CSS-Dateien unter der MIT-Lizenz. Beide erlauben die kostenlose Verwendung sowohl in privaten, als auch kommerziellen Projekten. Wichtig zu beachten ist nur, dass die Kommentare zur Lizenzbeschreibung nicht entfernt oder verändert werden.

Integration in Fontello

Der Font lässt sich auch über Fontello in der Version 4.6.3 nutzen. Darüber lässt sich ein Paket aus Fonts und CSS generieren, mit dessen Hilfe Icons aus verschiedenen Fonts für die Webseite individuell zusammengestellt werden können. Das spart nochmal zusätzlichen Speicherplatz. Zudem können hier auch eigene SVG-Icons und Fonts platziert werden, die dann in die Schriftart eingebunden werden.

Icons zusammenklicken in Fontello

Icons zusammenklicken in Fontello

Version 5 steht in den Startlöchern

Font Awesome erhält wohl demnächst ein Update, da die Finanzierung über Kickstarter bereits deutlich mehr Geld eingespielt hat, als das Finanzierungsziel ursprünglich vorgegeben hat. Die Icons sollen vollkommen neu gestaltet werden, zudem wird es eine kostenpflichtige Version geben, die noch einmal 1.000 zusätzliche Icons mitbringen soll.

Einsatz im Responsive Webdesign

Neben der einfachen Integration mit CSS und der sich daraus ergebenen Flexibilität ist es vor allem die kostenlose Verwendung, die den Einsatz von Icon-Fonts so attraktiv machen. Unsere Designer setzen daher in vielen Projekten ebenfalls Icon-Fonts ein. Niedrige Ladezeiten und Skalierbarkeit bilden die ideale Grundlage für die Verwendung in responsiv gestalteten Website-Projekten.

Wenn Sie Hilfe bei der Erstellung oder Umgestaltung Ihrer Webseite benötigen, können Sie uns gern kontaktieren.

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.