Icon Fonts sind eine spannende Alternative zur Verwendung von Bildern, um skalierbare, 100% scharfe Icons in einem responsive Webdesign umzusetzen. Das Icon Font Set “Font Awesome” bietet eine große Auswahl an Icons, ist leicht zu nutzen und kann frei für private und kommerzielle Projekte eingesetzt werden. Ich habe die Einbindung von “Font Awesome” vor ein paar Tagen getestet und meine Erfahrungen hier im Artikel zusammengefasst.

Die Problematik bei der Verwendung von Bildern in Webdesigns

Mit der Veröffentlichung des neuen iPad, das genau wie das iPhone 4 ein Retina-Display hat, wird das Problem bei der Nutzung von Bildern im Webdesign immer deutlicher. Die Bilder können auf einem Bildschirm mit extrem hoher Pixeldichte nicht mehr 100% scharf angezeigt werden. Und wenn zusätzlich noch die Zoom-Funktion genutzt wird, ist das Problem unscharfer Bilder im Design besonders deutlich.

[two_columns_one]

Icon als Bild
Icon als png-Bild stark gezoomt

[/two_columns_one]

[two_columns_one_last]

Skalierbare Icon Fonts
Font Awesome Icon stark gezoomt

[/two_columns_one_last]

[divider]

Im Gegensatz dazu können Icon Fonts genau wie eine gewöhnliche Schrift unendlich skaliert werden, und bleiben dabei immer gestochen scharf. Bei der Entwicklung hin zu mobilen Geräten und Monitoren mit immer höherer Pixeldichte und Zoom-Möglichkeit spricht daher alles für eine größenunabhängige, skalierbare Lösung bei der Verwendung von Symbolen und Icons im Webdesign.

[divider]

[two_columns_one]

Vorteile von Icon Fonts
  • skalierbar und somit immer 100% scharf und Retina-Display ready
  • Browser-kompatibel (auch in älteren Browsern)
  • leichte Einbindung
  • Farben und Größe der Icons kann leicht mit CSS angepasst werden
  • zusätzlich können CSS-Effekte, wie text-shadow für die Darstellung genutzt werden (hierzu eine Demo-Seite)

[/two_columns_one]

[two_columns_one_last]

Nachteile bei der Nutzung von Icon Fonts
  • keine individuelle Icon-Gestaltung möglich (alternativ könnten hier SVG-Images genutzt werden. Ein hilfreicher Artikel hierzu: Resolution Independance With SVG)
  • die Auswahl an modernen, kostenlosen Icon-Fonts (z.B. für Social Media Icons) ist noch nicht so groß
  • es muss ein zusätzlicher Schriftsatz über @font-face geladen werden

[/two_columns_one_last]

[divider]

Und so funktioniert Font Awesome

Gestaltet wurden die Font Awesome Icons vor allem für die Nutzung mit dem Bootstrap-Toolkit von Twitter. Die Einbindung ist mit LESS oder CSS möglich. Du kannst die Icon Font aber ohne Probleme auch für ein Webdesign-Projekt ohne Bootstrap nutzen. Derzeit sind bereits über 150 Icons im Font-Set , für die meisten Gelegenheiten (z.B. Tags, Kategorien, Artikel-Formate, Shop-Icons) wird man also fündig.

Font Awesome Icon Fonts
Eine Auswahl der Font Awesome Icons mit dazugehöriger CSS-Klasse

Die Integration wird auf der Font Awesome-Webseite detailiert erklärt. Ich beschreibe hier noch einmal kurz die wichtigsten Schritte zur Nutzung ohne Bootstrap:

1. Nach dem Download des Font Awesome-Ordners musst du als erstes den fonts-Ordner in dein Webseiten-Projekt einbinden (bei einem WordPress-Theme in den Ordner deines Themes).

2. Im zweiten Schritt musst du die CSS-Datei font-awesome.css (am besten der Ordnung halber inklusive des css-Ordners) in dein Projekt-Verzeichnis kopieren und innerhalb des head-tags verlinken:

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

Dabei musst du darauf achten, dass der Pfad zur Datei auch der richtige ist. In einem WordPress-Theme kannst du dazu get_template_directory_uri nutzen:

[code]
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/font-awesome.css">
[/code]

3. Jetzt kannst du mit der Verwendung der Icons loslegen. Du kannst dazu die jeweiligen CSS-Klassen z.B. icon-tag für das Schlagwort-Icon (alle CSS-Klassen in einer Liste findest du bei Base Icons und Extended Icons auf der Font Awesome-Webseite).

Es gibt verschiedene Einbindungs-Möglichkeiten für die Icons. Du kannst sie z.B. vor einer Überschrift einsetzen, in einem Button, vor Listen-Elementen oder in Navigations-Menüs. Für ein Autor-Icon vor einer Überschrift kannst du z.B. folgenden Code einsetzen:

[code]
<h4><i class="icon-user"></i>About the Author</h4>
[/code]

Möchtest du das Icon standardmäßig 33% größer angezeigt bekommen (ohne den CSS-Style selbst im Hauptstylesheet angeben zu müssen), kannst du die zusätzliche CSS-Klasse icon-large angeben:

[code]
<h4><i class="icon-user icon-large"></i>About the Author</h4>
[/code]

Dies ist nur ein erstes Beispiel für die Nutzung. Alle Optionen inklusive Code-Beispielen findest du unter “Code” auf der Font Awesome-Seite.

Tipps zum Weiterlesen

Hast du bereits Erfahrung mit der Verwendung von Icon Fonts und wie gefällt dir diese Alternative zu transparenten PNG-Images in Webdesigns? Hast du weitere Tipps oder kennst du weitere Icon Fonts zur Verwendung in Webseiten-Projekten? Über dein Feedback und weitere Tipps freue ich mich sehr!