Willkommen zurück! Heute will ich euch eine Seite vorstellen, die es erlaubt, eure eigene Schriftart für Icons zu erstellen. Heutzutage kommt kaum eine Seite ohne Icons aus. Sei es für die Navigation oder für die Hervorhebung bestimmter Abschnitte einer Seite. Ich habe bisher immer FontAwesome verwendet. Hier auf Next Direction habe ich auch zuerst damit begonnen. Als ich aber die Seite von Google auf Geschwindigkeit untersuchen ließ, stellte sich heraus, dass die Schrift, die von FontAwesome geladen wird, sehr groß ist und das Laden verzögert. Das hat mich schon sehr gestört, noch dazu verwende ich von den über 600 Icons nur um die zehn auf der Seite.
Ich habe mich also nach Alternativen umgesehen und bin dabei auf Fontello gestoßen. Das ist ein Open Source Dienst, der es euch erlaubt, aus mehreren Icon Sets die nötigen Icons zu wählen, und dann die CSS Definitionen und die nötigen Schriftarten erzeugen zu lassen. Das erlaubt sehr kleine Dateien, die nur ein paar Kilobyte groß sind. Ich habe Next Direction mittlerweile auch auf die Dateien dieses Dienstes umgestellt. Damit konnte ich die Größe der nötigen Dateien von über 100 Kilobyte auf unter zehn reduzieren.
Manuelle Erstellung
Die Verwendung über die Webseite von Fontello ist dabei sehr intuitiv. Ihr wählt einfach die Icons, die ihr haben wollt, und drückt anschließend auf Download webfont. Das Ergebnis ist ein Archiv, in dem ihr mehrere CSS Dateien und Schriftarten in entsprechenden Ordnern findet. In der Regel benötigt ihr nur die fontello.css Datei und alle Schriftarten im Ordner font. Je nach Browser, wird automatisch die unterstütze Schriftart geladen. Da die Pfade in der CSS Datei relativ angegeben sind, müsst ihr die Dateien entsprechend in eurem Webverzeichnis ablegen.
webroot
|- css/
|---- fontello.css
|- font/
|---- fontello.woff2
|- index.html
Die Icons könnt ihr am einfachsten über ein <i class="icon-mail"> Tag verwenden. Dabei ist das Prefix icon- von Fontello vorgegeben. Die Namen der einzelnen Icons werden zwar auch automatisch erzeugt, ihr könnt diese aber bei Bedarf auch anpassen, bevor ihr den Download der Dateien durchführt.
Automatisierte Erstellung
Auf der Github Seite von Fontello findet ihr verschiedene Wege, wie ihr die nötigen Dateien über die Kommandozeile erstellen lassen könnt. Das ist die Grundlage, um in einem automatisierten Buildprozess aus einer Konfiguration sowohl CSS Dateien als auch Schriftarten generieren zu lassen.
Nachdem ihr über die Webseite eure Icons ausgewählt habt, könnt ihr neben dem Download auch nur die Konfiguration herunterladen. Dazu klickt ihr nicht direkt auf Download sondern den kleinen Pfeil rechts daneben.
Ich habe mich für diesen Beitrag dazu entschieden, das Node.js Kommandozeilenprogramm zu verwenden. Das installiert ihr über folgenden Befehl auf der Kommandozeile:
npm install -g fontello-cli
Natürlich müsst ihr dazu Node.js und NPM auf eurem Rechner installiert haben.
Für den ersten Test, wechselt ihr auf der Kommandozeile nun in den Ordner, in dem sich die heruntergeladene Konfiguration befindet. Ich gehe davon aus, die Datei heißt config.json. Ihr könnt diese Datei natürlich auch umbenennen. Anschließend führt ihr folgendes Kommando aus und gebt eure Konfiguration an:
fontello-cli install --config config.json
In dem aktuellen Verzeichnis wird daraufhin ein Ordner fontello-... angelegt. Darin findet ihr die gleichen Dateien, die ihr auch beim manuellen Download gesehen habt. Wenn ihr die Dateien in anderen Ordnern ablegen wollt, gibt es dafür die Optionen --css und --font, mit denen ihr die jeweiligen Ordner angeben könnt.
Zusammenfassung
Der Dienst, den ich euch hier vorgestellt habe, eignet sich nicht nur, um kleinere Dateien zu erzeugen, sondern auch zur Integration in euren automatisierten Buildprozess. Ihr könnt die Konfiguration dazu einfach in euer Repository aufnehmen und zum Beispiel mit einem Node Kommando die nötigen Dateien holen.
Wenn ihr also euer nächstes Projekt startet, denkt an Fontello. Es hilft euch, nur die Icons in eure Seite einzubinden, die ihr auch benötigt, und damit die Ladezeiten eurer Seite zu beschleunigen.
Je nach Umgebung eures nächsten Projekts könnt ihr euch auch meinen Beitrag zu einem Full Stack JavaScript Frameworks durchlesen. Dort stelle ich euch eine Möglichkeit vor, wie ihr einzelne Icons von FontAwesome 5 über Tree Shaking verwenden könnt.
Jetzt will ich euch aber nicht länger aufhalten! Viel Spaß beim ausprobieren.