Font-Awesome – Piktogramme für alles
Ich habe vor kurzem (wieder einmal) einen neuen Blog begonnen und bin dabei (wieder einmal) auf das Problem gestoßen, dass ich (noch immer) keinen Plan habe, woher ich eigentlich einheitliche Piktogramme bekomme, sollte ich sie denn mal benötigen.
Durch Zufall habe ich dann das Projekt font-awesome gefunden. Das ist, kurz gesprochen, eine Schriftart, welche die meisten Icons beinhaltet, die man heutzutage so braucht. Eine Übersicht dieser befindet sich hier.
Ausgewählte Icons aus font-awesome (allerdings mit anderer Bezeichnung)
Die Schriftart ist zudem unter SIL OFL 1.1 lizenziert, oder anders gesagt: Eine Schriftart mit allen Icons die man so braucht, und das unter einer Open-Source-Lizenz. Fraglich ist natürlich, wie es sich hier mit den Brand-Icons verhält (Facebook, Twitter, Google, um mal einige zu nennen).
Eingebunden wird das ganze via mitgelieferter CSS-Datei. Ob das jetzt eine gute Idee ist oder nicht, eine Schriftart für Icons zu missbrauchen und dann auch noch das HTML-Tag „i“ zweckentfremdet zu verwenden, um diese Icons darzustellen, lasse ich ganz bewusst offen. Fakt ist, dass es einfach ist. Alles ist sauber dokumentiert, es funktioniert, und das für lau. Was will man denn noch alles?
Das Problem welches ich eher habe ist die größe der Schriftart. Bereitgestellt auf einer Webseite ist das ein komplettes Megabyte, welches zusätzlich heruntergeladen werden muss. Gerade bei langsameren Verbindungen oder wenn man mobil unterwegs ist stellt sich das als Problem heraus. Auch, weil die Schriftart logischerweise erst dann richtig dargestellt werden kann, wenn sie vollständig heruntergeladen wurde. Bis dahin treten dann Artefakte auf dem Bildschirm auf, die man nicht sehen will. Zum Glück hat man sich aber auch diesem Problem angenommen: Man erstellt einfach eine reduzierte Version, ausschließlich mit den Icons, die man braucht.
Ich persönlich verwende, nachdem ich einfach mal alles durchprobiert habe, den Service von Fontello. Die Auswahl der Icons kann man aus verschiedenen Icon-Sets vornehmen, ein Klick auf Download befördert das ganze schön als zip-Datei verpackt auf den Rechner. Eingebunden wird die angepasste Version – wie auch font-awesome selbst – über eine CSS-Datei. Einziges Manko ist, dass die Schriftart leicht anders dargestellt wird als dies bei font-awesome der Fall ist. Das lässt sich wiederum mittels CSS korrigieren (aber erfordert eben zusätzlichen Aufwand).
Aber das nur mal so nebenbei, möglicherweise ist es ja für den ein oder anderen hilfreich.