Iconfonts für Websites und Axure

Früher wurden Icons auf Websites immer als pixelbasierte Bilddateien bereitgestellt. Diese Zeiten sind eigentlich lange vorbei – inzwischen können Icons vektorbasiert als Webfonts genutzt werden. Als so genannte Iconfonts sind diese problemlos skalierbar, einfärbbar und auch die Verwendung ist sehr einfach.

Für das Prototyping in Axure sind Iconfonts ebenfalls sehr hilfreich. Besonders die Integration des bekannten Iconfonts FontAwesome ist durch eine Bibliothek sehr einfach und funktioniert sogar offline.

Iconfonts – Erklärung und Vorteile

Iconfonts sind Computer-Schriftarten, die Icons statt Buchstaben verwenden. Ein klassisches Beispiel ist „Wingdings“, die mit Windows installiert wird. In Form von Webfonts lassen sich Iconfonts dann auch in Websites einbetten und so an die Besucher ausliefern, ohne dass diese die Schriftart lokal installieren müssen.

Iconfonts sind frei skalierbar und einfach einzubinden (hier: FontAwesome)

Iconfonts sind frei skalierbar und einfach einzubinden (hier: FontAwesome)

Im Vergleich zu pixelbasierten Icons haben Iconfonts eine Reihe von Vorteilen:

  • Die Icons sind vektorbasiert gespeichert und somit komplett frei skalierbar – ohne Qualitätsverlust.
  • Auch auf Retina-Displays werden die Icons ohne besondere Vorkehrungen scharf dargestellt.
  • Per CSS können die Icons beliebig eingefärbt und somit an das Seiten-Design angepasst werden. Auch Mouseover-Effekte lassen sich so sehr einfach nur mit CSS umsetzen, da keine andere Bilddatei geladen werden muss.
  • Die Einbindung der Icons ist generell sehr einfach. Nach dem Laden des Iconfonts sind meist nur sehr kurze Codeschnipsel notwendig.

Bekannte, kostenlose Iconfonts

Es gibt inzwischen eine Vielzahl von Iconfonts. Hier eine Liste mit einigen der bekanntesten, die zumindest in der Basisversion kostenlos sind:

Axure-Integration von FontAwesome

Natürlich sind Iconfonts nicht nur für fertige Websites hilfreich, sondern auch schon im Rahmen der Konzeption. Wir verwenden in dem Prototyping-Tool Axure vor allem FontAwesome, da dieses Iconfont besonders einfach und gut integriert werden kann.

Icon-Bibliothek

Da die einzelnen Icons nicht einfach mit der Tastatur eingetippt werden können, ist das Einfügen in Axure ohne Hilfsmittel etwas mühselig. Der beste Weg ist das Kopieren über die Zwischenablage.

Wirklich komfortable wird es dann aber mit einer Axure-Bibliothek für die Icons. Glücklicherweise gibt es die hilfreichen User des Axure-Forums, die uns diese Arbeit abgenommen haben.

MIt einer Axure-Bibliothek für FontAwesome wird das Einfügen zum Kinderspiel

MIt einer Axure-Bibliothek für FontAwesome wird das Einfügen zum Kinderspiel

Normale Webfont

Genauso wie andere Schriftarten sind Iconfonts natürlich zunächst nur verfügbar, wenn sie lokal installiert wurden. Dies ist gerade bei Prototypen für Kunden ungünstig.

Seit Axure RP 7 werden glücklicherweise Webfonts unterstützt, so dass auch Iconfonts ohne lokale Installation bereitgestellt werden können. Solange diese über das Internet verfügbar sind, können sie per @font-face in Axure als Webfont hinterlegt werden und stehen somit allen Betrachtern des Prototypens zur Verfügung.

Für FontAwesome ist dies besonders einfach, da diese Iconfont frei zugänglich von MaxCDN gehostet wird. In diesem Fall muss nur auf die entsprechende CSS-Datei (//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css) im Internet verwiesen werden, alles andere geschieht von selbst.

FontAwsome kann als Webfont in Axure eingebunden werden

FontAwesome kann als Webfont in Axure eingebunden werden

Diese Einbindung und auch das Styling der Icons habe ich in einem kleinen Prototypen demonstriert, den es zum Betrachten auf AxShare und zum Download als .rp-Datei gibt.

Offline-Webfont (Base64)

Perfekt ist die oben beschriebene Einbindung aber noch nicht: Offline können die Icons nicht angezeigt werden, da der Webfont im Internet liegt.

Dazu habe ich vor Kurzem einen genialen Trick gefunden: Die Kollegen von eparo beschreiben, wie eine Schriftart (etwa FontAwesome) per Base64-Kodierung direkt in den Prototypen eingebettet werden kann. Die Anleitung ist leider nur für iOS, aber glücklicherweise hat ein User des Axure-Forums den nötigen Code für FontAwesome direkt gepostet und die Einbindung beschrieben.

Weitere Entwicklungen – Custom Iconfonts und Smart SVGs

Ein Nachteil bei Iconfonts ist, dass immer alle Icons geladen werden – selbst wenn die Website nur 5 davon verwendet. Die Macher von FontAwesome haben sich diesem Problem mit fonticons angenommen. Hier kann man sich Icons aus unterschiedlichen Sammlungen aussuchen und nur diese in ein Iconfont integrieren.

Sehr spannend ist auch die Verwendung von vektorbasierten Icons im SVG-Format. Die kostenpflichtige Version von Iconic bietet mit diesen „Smart SVGs“ einige tolle Features:

  • Die Icons können nach belieben mehrfarbig eingefärbt werden.
  • Texte in den Icons können per Parameter angepasst werden (etwa bei Datei-Icons).
  • Es gibt 3 unterschiedlich detaillierte Varianten je Icon, so dass bei höherer Schriftgröße mehr Details gezeigt werden.

5 Gedanken zu „Iconfonts für Websites und Axure

  1. Wolf

    Danke für den Überblick, Jan. Wir setzen jetzt auf OTTO.de schon seit knapp 2 Jahren Iconfonts ein und sind damit sehr schön auflösungsunabhängig. Bis aber alle Welt Retina-Displays oder zumindest Betriebssysteme mit gutem Subpixel-Antialiasing hat, muss man allerdings bedenken, dass man gerade bei kleinen Schriftgrößen bei seinen Icons optische Abstriche machen muss. Da ist man manchmal mit einem Pixelbild noch besser dran. Die Vorteile eine Icon-Font überwiegen aber dennoch.

    Ich denke wichtig ist, anzumerken, dass man natürlich auch Iconfonts mit eigenen, individuellen Icons anlegen kann und nicht auf das von den Diensten angebotene Stock-Material zurückgreifen muss. IcoMoon bietet da einen Editor, mit dem man ohne viel Fachwissen eigene Iconfonts bauen kann.

    Antworten
  2. Jan Pohlmann Beitragsautor

    Stimmt, das hatte ich bei IcoMoon auch gesehen. Gerade bei größeren Websites lohnt es sich natürlich absolut, eigene Icons zu entwickeln. Wenn man mit Axure arbeitet lassen sich eigene Iconfonts dort auch problemlos einbinden. Nur das Erstellen der Bibliothek muss man selber übernehmen. 🙂

    Antworten
  3. Fabian

    Vielen Dank für den Artikel! Ich nutze Axure selbst regelmäßig und bin daher auch häufig mit dem Problem der Icon-Einbindung konfrontiert. Die Einbindung von WebFonts ist da natürlich eine willkommene Möglichkeit das Ganze sauber zu integrieren. Besonders bei selbsterstellten Fonts von Kunden ist sowas enorm hilfreich!
    Eine weitere Möglichkeit, die man noch erwähnen könnte, ist das direkte Installieren der Schriftart auf dem Rechner und dem Einfügen (Copy&Paste) der Icons als normale Labels in den Prototyp. Dann noch die Schriftart des Labels auf die entsprechende IconFont setzen (z.B. Glyphicons) und schon kann man auch auf diesem Wege die Icons nutzen. Allerdings muss dann die Font natürlich auf allen Rechnern, die den Prototyp nutzen wollen, installiert sein.

    Antworten
  4. Jan Pohlmann Beitragsautor

    Hallo Fabian, im Prinzip macht auch die Bibliothek nichts anderes – die Elemente sind jeweils nur Label mit dem einen Symbol drin. Copy&Paste geht natürlich genauso und man muss keine Bibliothek erstellen.
    Schriftart installieren und Webfont schließen sich übrigens nicht aus: Du kannst sie installiert haben und dann zusätzlich noch als Webfont einbinden. Es ist sogar eigentlich notwendig, da man die Schriftart/Iconfont sonst in Axure nicht sieht, sondern nur im Browser.

    Antworten
  5. Pingback: Top-Themen der UX-Welt in den letzten 30 Tagen - Usabilityblog.de

Schreibe einen Kommentar

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