Kommentare 18

Skalierbare, Retina-Display ready Icon Fonts für responsive Webdesigns

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.

Icon als Bild

Icon als png-Bild stark gezoomt

Skalierbare Icon Fonts

Font Awesome Icon stark gezoomt

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.

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)
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

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:

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

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:

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

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:

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

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:

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

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!

18 Kommentare

    • Hallo Joël,

      die Media Queries Angaben werden durch das neue Retina-Display des iPads nicht beeinflusst, da bei den Angaben in den Media Queries die eigentliche Browsergröße relevant ist. Das Retina-Display des neuen iPads hat zwar eine Auflösung von 2048 x 1536px, diese wird aber quasi auf den sehr viel kleineren Bildschirm des iPads zusammen “gedrückt”. So wird das Bild auf dem Retina Display schärfer, da sich jetzt mehr Pixel auf der gleichen Fläche befinden.

      Viele Grüße,
      Ellen

  1. erwin schober

    hi ellen, an dieser stelle auch mal von mir ein riesengrosses !dankeschön! für deine vielen artikel, links, resources, tutorials, inspirationen.. auf deiner seite. liebe grüsse aus dem sonnigen wien! er

  2. Kani

    Was ich mich die ganze Zeit frage: Wenn ich eine App für das iPad 3 optimiere, wie sieht
    dann die Darstellung auf dem iPad 2 ohne Retina aus? Gibt es Probleme hierbei?

  3. Pingback: frische-zitronen.de | Webdesign | Contao: Arbeiten mit Iconfonts und dem Webfontloader

  4. Pingback: Retina Anpassungen – Jonas Reitmann

  5. Sebbel

    Tipp: Wenn man die Fonts in ein Child-Theme packen möchte, sollte man sie im Header folgendermaßen einfügen, ansonsten werden die Schriftarten nicht geladen:

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

  6. Sebbel

    der php-Code wird offensichtlich in den Kommentaren nicht ausgegeben bzw. herausgelöscht.

    einsetzen muss man bei child-themes “get_stylesheet_directory_uri()” anstelle von “get_template_directory_uri()” (siehe beschreibung oben).

  7. Pingback: Genericons: Eine kostenlose Icon Font für WordPress-Projekte | Elmastudio

Schreibe eine Antwort