Font Awesome: Das ist neu in Version 4.0 des Icon-Fonts
font-awesome-teaser-595x149.png" alt="font-awesome-teaser" width="595" height="149" />
Font Awesome ist eines der besten Icon-Font-Sets auf dem freien Markt. Mit Font Awesome erhältst du über 370 Icons, die du in deine Webseite einbauen und mit CSS problemlos anpassen kannst. Das Set hat gegenüber klassischen Icons den Vorteil, dass die beinhalteten Icons unendlich und verlustfrei skalierbar sind, mit CSS im Aussehen angepasst werden können und im Vergleich zu bildbasierten Lösungen deutlich weniger Kilobyte auf die Waage bringen.
Font Awesome 4.0 – Das ist neu:
Ein Vorteil, den auch das neue Bootstrap 3 für sich nutzt. Das CSS-Framework aus dem Hause Twitter hat im neuen Release die alten PNG-Glyphicons durch eine neue Icon-Font-Version ersetzt. Auch Font Awesome bietet in der Version 4.0 neben zehn neuen Icons eine vollständige Bootstrap-Kompatibilität und erweitert so das 180 Zeichen starke Glyphicon-Set auf stolze 550 Symbole.
Font Awesome 4.0: Zehn neue Icons. (Screenshot: Font Awesome)
Anders als viele andere Icon-Fonts ist Font Awesome nicht nur gut anzusehen, sondern auch Screen-Reader-kompatibel. Für das neue Release wurde der Icon-Font von Grund auf überarbeitet und für eine bessere Performance optimiert. Neben der Kompatibilität zu Bootstrap wurde auch daran gearbeitet, eine bessere Kompatibilität mit anderen Frameworks – beispielsweise dem Foundation-Framework – zu gewährleisten. Hierfür wurden die Namenskonventionen für den Einsatz der Icons komplett überarbeitet.
Font Awesome im Einsatz
Die Benutzung von Font Awesome geht genauso einfach von der Hand wie die von Bootstrap-Icons. Nachdem du das Font-Awesome-Stylesheet eingebunden hast, kannst du <i>-Tags mit zu den Buttons dazugehörigen Klassen versehen, um so das gewünschte Icon vom Browser darstellen zu lassen.
<link href="font-awesome.css" rel="stylesheet">
<i class="fa fa-camera-retro"></i> fa-camera-retroMit Hilfsklassen kann die Größe des Icons einfach und ohne separates CSS gesteuert werden. Mit den Klassen fa-lg (+33%), fa-2x, fa-3x, fa-4x oder fa-5x kann die Icon-Größe direkt im HTML gesteuert werden. Außerdem bietet Font Awesome die Möglichkeit, die Ausrichtung der Icons zu ändern oder sie zu spiegeln, mehrere Icons übereinander zu stapeln oder animierte Icons – beispielsweise für einen Ladezustand – einzusetzen.
Die aktuelle Version der kostenlosen Icon Font erhältst du auf der offiziellen Webseite von Font Awesome.
größtes Problem an der neuen Version ist, dass es nicht mehr abwärts kompatibel ist, da sich der namespace der icons komplett geändert hat, d.h. einfach mal ein update innerhalb eines bestehenden projektes ist nicht
Ich würde das nicht zwangsläufig als Problem sehen. Wenn du Bootstrap 2 und Bootstrap 3 vergleichst, hast du auch viele Änderungen, die es nicht gerade einfach machen auf das neue System zu wechseln. Klar, bei etwas, wie einem Icon-Font ist das vielleicht nicht ganz nachvollziehbar. Aber ohne Grund werden solche Änderungen niemals vorgenommen – und so kann für zukünftige Versionen eine bessere Kompatibilität geschaffen werden.