Thema des Monats

Zeigen den Weg: Icon Fonts

Eine Auswahl an Font Awesome Icons, eingefärbt im k-webs Rot.

 

Bei der Gestaltung einer Website kann man manchmal in eine Situation kommen, in der man gerne Icons verwenden würde, oftmals auch im Text. Nun stellt sich die Frage: wie setzt man diese am besten ein? Icons als Bilder zu platzieren kann problematisch sein, da es verschiedene Herausforderungen birgt:

  • wie gross ist das Icon?
  • wie hoch aufgelöst ist das Bild des Icons (Stichwort: Retina Displays)?
  • wie oft wird das Icon auf der Site verwendet?
  • werden verschiedene Iterationen des Icons benötigt?

Die Verwendung von Bildern für Icons kann durchaus problematisch sein, da diese schlecht skalieren, d.h. wenn sie auf einer bestimmten Bildschirmgrösse gut aussehen, muss das nicht heissen, dass sie bei einer grösseren oder kleineren Bildschirmgrösse noch den gleichen Eindruck hinterlassen. Gerade Retina Displays können hier Probleme verursachen, da diese wesentlich höher aufgelöst sind als reguläre Displays und daher niedrig aufgelöste Bilder gerne schwammig und grobkörnig dargestellt werden.
Zudem benötigen Bilder auch immer Datenvolumen, welches auf jeder Website kostbar ist. Auch fällt für jedes Bild auf einer Seite ein http Request an (es sei denn man verwendet CSS Sprites), welche ebenfalls an der Performance zehren.
Zu guter Letzt möchte man z.B. ein Icon auf verschiedenen Seiten in verschiedenen Farben oder Grössen darstellen – bei der Verwendung von Bildern muss also für jede Variation ein eigenes Bild erstellt werden.

Hier kommen sogenannte Icon Fonts ins Spiel, unter denen Font Awesome vermutlich der bekannteste ist. Diese Icon Fonts stellen eine Bibliothek an Icons zur Verfügung, welche leicht in eine Website eingebunden und via CSS manipuliert werden können.
Font Awesome verwendet skalierbare Vektor Icons, welche sich stufenlos vergrössern und verkleinern lassen und dabei nichts an ihrer Darstellungsqualität einbüssen.
Zudem lassen sich auf diese Icons sämtliche, mit CSS möglichen Effekte anwenden, sei es z.B. die Darstellung in anderen Farben oder das Hinzufügen von Schatten.
Weitere Vorteile sind eine gute Kompatibilität mit Screen Readern und, last but not least, die Tatsache dass Font Awesome kostenlos verwendbar ist.

Ein weiterer, weithin verwendeter Icon Font ist GLYPHICONS. Bekannt ist er unter anderem durch seine Verwendung im Bootstrap-Framework, wo ein ansonsten kostenpflichtiges Set an Icons von den GLYPHICONS Machern gratis zur Verfügung gestellt wird. Im Gegensatz zu Font Awesome ist GLYPHICONS nämlich nur in der Basisversion (FREE) kostenlos. Erweiterte Sets wie PRO oder ALL sind kostenpflichtig und fordern eine Einmalzahlung, welche aber in der PRO Version auch alle zukünftigen Updates beinhaltet.

Als weitere Alternative zu Font Awesome wäre noch Fontastic zu nennen. Hier lassen sich anhand eines Gratis-Accounts verschiedene Icon Sets generieren. Diesen kann jeweils eine CSS Klasse zugeordnet werden, falls nötig. Eine Besonderheit von Fontastic ist die Möglichkeit, die Icons in einer Cloud zu speichern. Da die Icons auch online eingebunden werden können, lassen sich Änderungen an den Icons zentral verwalten. Eine Änderung an einem Icon in der Cloud wird dann direkt live am Ort der Verwendung aktualisiert.
Die grundsätzliche Verwendung der Icons ist bei Fontastic umsonst, lediglich der Cloud-Speicherplatz für eigene Icon Sets wird ab 5000 Page Views pro Monat kostenpflichtig.

Falls Sie mehr über die Verwendung von Icon Fonts wissen möchten, oder diese gerne auf einer Website einsetzen möchten, wenden Sie sich gerne an uns!

Referenzen

Aufgrund unserer über 16-jährigen Erfahrung auf dem Gebiet der Webentwicklung, können wir auf eine lange und vielseitige Liste von Referenzen verweisen. Machen Sie sich selbst ein Bild von unserer Bandbreite, und stöbern Sie etwas herum. Wir sind sicher, wir können Sie überzeugen! Unsere Referenzen »

Kontakt

+41 61 261 16 46

[email protected]