In wenigen Schritten eigene Icons als Icon-Font erstellen

Seit geraumer Zeit befasse ich mich ja gerne mal mit Icon-Fonts, auch wenn der Trend mittlerweile eher zu reinem SVG tendiert. Symbolschriften sind in meinem Augen immer noch aktuell. Mir ist es in der Vergangenheit öfter passiert, das ich meine Symbole aus verschiedenen Schriften zusammenklicken musste oder einige Icons in keiner frei verfügbaren Schrift existierten. An dieser Stelle ist guter Rat echt teuer. Lange habe ich nach adäquaten Lösungen gesucht, um selbst fehlende Zeichen verwenden zu können. Anfangs suchte ich mir einen Wolf nach so manchem Symbol. Dann vektorisierte ich die Icons einfach selbst. Das ist aber relativ zeitaufwendig. Letztens stieß ich auf einen recht simplen Workaround, den ich euch nicht vorenthalten möchte. Mithilfe dieses Tutorials gelingt es euch spielend eigene Icons einfach in eine Icon-Font umzuwandeln.

Vector Magic hilft beim Vektorisieren

Zunächst benötigt ihr ein Bild des zu vektorisierenden Symbols. Im Idealfall sollten die Flächen gut voneinander abgegrenzt sein. Diese Grafik ladet ihr auf der Webseite von Vector Magic hoch. Sogleich rendert das Online-Tool euer Bild in Vektoren um. Das dauert je nach Größe und Umfang der Grafik ein bisschen. Wenn der Prozess erfolgreich war, seht ihr links euren Input und rechts den fertigen Output. Veränderungen braucht ihr keine vornehmen, da ohnehin mit den maximalen Einstellungen gearbeitet wird. Ladet das fertige Vektor-Projekt herunter. Vector Magic fordert euch zur Erstellung eines Accounts auf. Kein Problem, generiert einfach eine Wegwerf-Mail und verifiziert nachfolgend das Konto. Danach speichert ihr die SVG ab. Wir sind fair und löschen den erstellten Account wieder, über My Account ⇒ Delete Account. Das einzugebende Passwort steht in der Aktivierungsmail.

Pixelgrafik bei Vector Magic hochladen Vektorisierungsprozess in Vector Magic
fertige Vektorengrafik bei Vector Magic herunterladen Account bei Vector Magic löschen
Vector Magic: von der Rastergrafik zur fertigen Vektorgrafik

Der Dienst bzw. auch das Desktop-Programm sind kostenpflichtig. Vector Magic bietet nur einen beschnittenen kostenlosen Umfang. Für unsere Zwecke aber vollkommen ausreichend. Das Renderverfahren ist meistens genau.

Inkscape zum Bearbeiten und zur Font-Generierung

Inkscape könnt ihr entweder richtig installieren oder als portable Version verwenden. Erstellt ein neues Projekt in dem Format icon_64×64 und importiert das heruntergeladene SVG. Skaliert die Vektorgrafik und entfernt alle unnötigen Ebenen. Beachtet bitte, dass ein Schriftsymbol am Ende aus nur einer Ebene bestehen darf. Ansonsten treten Darstellungsfehler auf. Kombiniert also überlagernde Ebenen miteinander. Passende Optionen finden sich unter Path. Die Bezeichnungen sind eigentlich selbsterklärend. Wurde der Schritt erfolgreich gemeistert, geht es jetzt daran, die Icon-Font zu generieren. Steuert über Text den SVG Font Editor an. Rechts erscheint ein neues Menü. Erstellt eine neue Schrift. In dem Tab-Reiter Glyphs klickt ihr zunächst auf From selection…, anschließend fügt ihr ein neues Glyph hinzu. Diesem wiederum weist ihr eine beliebige Zeichenfolge zu. Get curves from selection… stellt das Symbol später in der Vorschau dar, sobald die Zeichenkombination darunter eingetippt wird.

Icon in Inkscape nachbessern und Schrift generieren
Icon in Inkscape nachbessern und Schrift generieren

Speichert das ganze Projekt als Inkscape-SVG ab. Diese Vektor-Datei kann nun jedoch noch nicht als Icon-Font verwendet werden. Hierzu sind zwei weitere Online-Tools notwendig.

Fertige Symbolschrift mit Glyphter und IcoMoon

Ruft die Webseite von Glyphter im Webbrowser auf und zieht das Inkscape-SVG per Drag & Drop auf einen freien Buchstaben. Die Schrift speichert ihr danach sofort auf dem Computer. Komischerweise ist Glypher eines der wenigen Tools, dass das SVG fehlerfrei verarbeitet. Entpackt das Archiv und schnappt euch die SVG-Schrift. Diese ladet ihr direkt in die IcoMoon-App. Dort lassen sich die Icons deutlich besser weiterverarbeiten. Passt euch die Symbole so an, wie ihr sie benötigt. Anschließend exportiert ihr die fertige Schrift. Nun könnt ihr diese einfach in euren Webprojekten verwenden oder in anderen Tools weiterverarbeiten. Fehlt euch irgendwann wieder ein Icon, wisst ihr nun, wie dieses leicht in eure Symbolschrift gelangt. Lästiges Vektorisieren entfällt an dieser Stelle.

SVG in Glyphter und IconMoon finalisieren
SVG in Glyphter und IcoMoon finalisieren

Bei solch einfachen Dingen ist aufwendige Vektorisierung meiner Meinung nach auch gar nicht notwendig. Es nützt mir wenig 30 Minuten oder länger an einem Symbol zu sitzen, wenn ich es bei gleicher Qualität in 5 Minuten generiert habe. Man muss das Rad nicht permanent neu erfinden. Es spart letztendlich ebenso eine Menge Zeit.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.