Eigene Icon-Font: Wir zeigen Euch, wie’s geht.

Warum Icon-Fonts so praktisch sind

Vektorbasierte Dateien sind im Web äußerst beliebt. Das gilt vor allem für Icons, weil sie Inhalte übersichtlicher machen und trotz minimaler Datenmengen viel zur Optik eines User Interfaces beitragen – ganz egal ob Website oder Software – beitragen. Man könnte sogar sagen, dass viele Icons selbsterklärend sind und somit ein Mittel gegen Sprachbarrieren darstellen. Im Rahmen unserer Softwareentwicklungen kommt es relativ häufig vor, dass wir eigene Icon-Fonts uns spezielle Zeichen benötigen. Genau an diesem Punkt standen wir vor Kurzem. Deshalb dieser Beitrag.

Zurück zum technischen Part: Einzelne Icons kann man natürlich als SVG-Dateien einbinden. Wer viele verschiedene Icons auf einer Website benutzt, oder ein ganzes Icon-Set erstellen möchte, dem empfehlen sich Icon-Fonts. Das sind Schriftdateien, in denen statt Buchstaben Icons platziert sind.

Eine Icon-Font hat folgende Vorteile gegenüber einzelnen SVG-Dateien:
1. Ich habe nur eine einzige Datei
2. Einfaches Austauschen von Icons per Unicode
3. Ich kann den Icons – genau wie einer Schrift – per CSS Styles zuweisen
4. Die Icon-Größe wird bequem per Schriftgröße definiert

In diesem Beitrag erkläre ich, wie man aus einzelnen Icons eine professionelle Icon-Font erstellt.

Die passenden Werkzeuge zum Erstellen einer Icon-Font

Im Internet gibt es viele kostenlose Apps, mit denen man aus einzelnen SVG-Dateien eine Font generieren lassen kann, beispielsweise IcoMoon: https://icomoon.io. Hier kann ich allerdings keine Einstellungen vornehmen, sondern nur Icons hinzufügen oder entfernen. Das bedeutet, dass meine SVG-Dateien perfekt vorbereitet sein müssen und ich für jede Änderung eine neue SVG-Datei vom jeweiligen Icon exportieren und wieder hochladen muss. Das funktioniert, ist aber eher umständlich.

Ich empfehle Euch deshalb, ein richtiges Schrift-Bearbeitungsprogramm zu benutzen, zum Beispiel Glyphs Mini: https://glyphsapp.com . Das gibt es allerdings nur für den Mac. Der Download und die ersten 30 Tage sind komplett kostenlos, sogar mit allen Features. Danach kostet das Programm knapp 50,- Euro. Eine Investition, die sich für jeden Designer lohnt, der häufiger eigene Icon-Fonts für allgemeines User Interface Design benötigt. Die Icons selbst erstelle ich mit dem Programm Adobe Illustrator.

Einrichten der Font

Damit die Icons später optimal eingesetzt werden können, lege ich die Font so an, dass die Icons den Textrahmen möglichst gut ausfüllen. Der Rahmen selbst soll quadratisch sein, da das am besten zu meinen Icons passt. In meinem beispiel habe ich mich für das Format 450 x 450px entschieden. Als erstes öffne ich Glyphs Mini und erstelle eine neue Datei. Anschließend geht es in die Einstellungen über Datei > Schrift Einstellungen…

Die Breite der einzelnen Buchstaben (bzw. Icons) muss ich für jeden Buchstaben einzeln einstellen. Die Höhe setzt sich zusammen aus dem höchstmöglichen Punkt eines Buchstaben (Oberlänge) und dem tiefstmöglichen Punkt (Unterlänge). Um auf 450px zu kommen verwende ich folgende Einstellungen: 418px Oberlänge über der Grundlinie und 32px Unterlänge unter der Grundlinie, was zusammen 450px ergibt.

Erstellen der Icons

Um die Icons zu erstellen benutze ich das Programm Adobe Illustrator und lege eine Datei mit dem Maßen 450 x 450px an. Die Icons erstelle ich zunächst mit Pfaden, denen ich eine Kontur gebe und skaliere sie so, dass sie die Arbeitsfläche in der Breite oder in der Höhe genau ausfüllen (bzw. bei quadratischen Icons logischer Weise in der Höhe und Breite). Dabei achte ich darauf, dass alle Icons dieselbe Konturstärke haben.

Nachdem die Icons fertig sind, mache ich mir Kopien davon, indem ich die Ebenen kopiere. In diesen Kopien wandle ich alle Pfade in Flächen um. Anschließend vereine ich alle Elemente mit dem Pathfinder, sodass es keine Elemente mehr gibt, die sich überlappen und erstelle daraus einen zusammengesetzten Pfad.

Abb. 1: Das Icon passt genau in die Arbeitsfläche | Abb. 2: Das Icon in der Pfadansicht | Abb. 3: Das Icon umgewandelt in eine Fläche

Einfügen des Icons in die Font

In Glyphs Mini lege ich ein neues Zeichen an, dafür wähle ich Layer > neuer Buchstabe. Im Feld „unbenannt“ bestimme ich das Zeichen, bzw. den Unicode, unter dem das Icon später abrufbar ist. Ich entscheide mich für einen Bindestrich und tippe einfach „-„ ein. Im Feld darunter kann ich die Buchstabenbreite eingeben, diese soll immer 450px betragen.

Im Anschluss kopiere ich den Pfad aus Illustrator einfach in die Zwischenablage (markieren und dann ganz klassisch mit Cmd + C) und füge ihn in Glyphs Mini ein (Cmd + V). Um das Zeichen jetzt exakt mittig anzuordnen markiere ich es und setze die Koordinaten auf X 225, Y 225, vom Mittelpunkt des Objektes ausgehend, da diese Werte die Hälfte der Gesamthöhe (450) betragen. Das fertige Icon sieht nun so aus:

Jetzt muss ich nur noch das Fenster schließen. Wenn ich mehrere Icons angelegt habe, kann das wie folgt aussehen:

Export der Icon-Font

Wenn ich alle Icons angelegt habe wähle ich Datei > Exportieren.
Für die Anwendung in einem Grafik-Programm wähle ich eine OpenType-Schrift, für eine Anwendung im Internet am besten eine WOFF. Nach dem Export kann ich die Schrift dann ganz bequem per CSS in eine Website einbinden. Fertig ist meine eigene Icon-Font.