Font-Bibliotheken wie font-awesome und glyphicons sind sehr praktisch aber oft auch überdimensioniert, wenn man nur ein paar Icons verwenden möchte. Für diesen Fall kann man mit IcoMoon seinen eigenen Icon-Font erstellen.

icomoon-bild_im_blogpost

1. Seite aufrufen und IcoMoon App auswählen

icomoon-icon-erstellen-ideesign-koeln-auswahl

Zunächst muss die Seite icomoon.io aufgerufen werden. Oben rechts auf der Seite wechselt man zur IcoMoon App, mit der man seinen eigenen Font erstellen kann.

2. Icons hochladen oder aus anderen Fonts auswählen

icomoon-icon-erstellen-ideesign-koeln-iconauswahl

Über „Import Icons“ wählt man seine selbst erstellten Icons von seinem Rechner aus. Die Dateien müssen im SVG Format vorliegen, damit IcoMoon sie versteht. Enthaltene Schriften sollten unbedingt in Pfade umgewandelt sein, da sonst Darstellungsfehler entstehen können und auch die Dateigröße zu groß ist.

Möchte man keine eigenen Icons verwenden, kann man sich aus den verschiedenen kostenlosen Fonts wie FontAwesome, ElegantIcons oder LineIcons seine Icons individuell zusammenstellen und sich so seinen eigenen Wunsch-Font bauen.

Als nächstes auf „Generate Fonts“ klicken, um den Font zu erstellen und weitere Einstellungen zu tätigen.

3. IcoMoon Font: Einstellungen

icomoon-icon-erstellen-ideesign-koeln-download-einstellungen

Bevor man den Download-Button klickt, kann man mit Klick auf das Zahnrad rechts daneben weitere Einstellungen vornehmen.

 icomoon-icon-erstellen-ideesign-koeln-options

In den Einstellungen kann man Klassennamen vergeben oder Attribut-Einstellungen für CSS (Klassen-Pre- und Postfix) ändern. Das kann nützlich sein, wenn man mehrere Sets benutzt. Icomoon erstellt aber auch schon von Haus aus sinnvolle Bezeichnungen, wenn sie denn eindeutig benannt wurden. So wird, wenn das Icon „star.svg“ (wie in unserem Beispiel) heißt, auch die vergebene CSS-Klasse von IcoMoon zur späteren Verwendung diesen Namen enthalten. Nach dem Prinzip: „prefix-iconname-postfix“.

4. Dateien aus dem Download

Nach dem Download erhält man eine Anzahl von verschiedenen Dateien. Die wichtigsten für den direkten Gebrauch sind die Schrift-Dateien im Ordner „Fonts“ und die style.css, die man nachher in sein eigenes Webprojekt einbinden muss. Die Angaben zur Einbindung des Fonts kann man aus der style.css in sein eigenes Stylesheet übernehmen, den Ordner Fonts legt man einfach neben seinem Stylesheet ab.

Wie man dann den Webfont benutzt, ist in der Stylesheet-Datei selber erläutert.

icomoon-icon-erstellen-ideesign-koeln-dateien

Viel Spaß mit dem eigenen Icon Font!