Mein erster Schritt zum eigenen Iconfont

Icomoon im Test

posted by Alvina Dück

am 24. Oct 2017

Ich bin Auszubildende im 1. Lehrjahr im Bereich Mediengestaltung, Schwerpunkt Digital & Web, bei den epunks. Bei meinem ersten Projekt lerne ich die Planung und Konzepterstellung, sowie die inhaltliche, gestalterische und technische Umsetzung, eines Website Relaunches im Bereich Frontend. Während der Konzepterstellung entschieden wir uns, die Auflistung einzelner Leistungen unseres Auftraggebers optisch durch Vector-Icons zu ergänzen. In diesem Artikel gehe ich auf die moderne Entwicklung eines eigenen Iconfonts sowie auf deren grafische und technische Einbindung ein. Technisch folgt noch ein detaillierterer zweiter Teil.

Der schnellste und einfachste Weg wäre Iconfonts wie z.B. fontawesome zu verwenden, die man in sein Projekt einbindet und die Icons verwendet, die man aktuell benötigt. Hierbei werden allerdings alle Daten für die Icons, die man nicht verwendet, und das können echt viele sein, permanent mit geladen. Aktuell bietet fontawesome 675 Icons kostenlos und unlizensiert an.

Fontawesome

Farbe, Schriftröße usw. können wie bei normalen Schriften einfach per CSS definiert werden. Durch die Beliebtheit und zunehmende Bekanntheit der Iconfonts wirken diese für den Benutzer als Usability-Komponenten zwar gewohnt aber auch oft langweilig und eintönig. Ebenfalls kann es bei der Einbindung von fontawesome Icons zu Problemen bei der perfekten Positionierung führen (line-height).

Aufgrund abweichender Anforderungen für mein aktuelles Projekt, wie Stil, Individualität etc., habe ich mich nach Alternativen umgesehen. Dabei bin ich auf “Icomoon” gestoßen. “Icomoon” ist ein Tool, dass sowohl eigene Icons, als auch die Möglichkeit einen eigenen Iconfont zu erstellen, bietet.

Vorteilhaft am eigenen Iconfont ist die individuelle Anpassung der Icons auf Corporate-Design und Produkte. Aber Vorsicht! Ähnlichkeit mit Piktogrammen, die bereits mit einer eindeutigen Bedeutung bekannt sich, sollten vermieden werden, wie z.B. das Desktop-Icon Fontawesome Desktop Icon von fontawesome horizontal gespiegelt als Icon für eine Vase oder einen ‘Flachmann’ Fontawesome Desktop Icon horizontal gespiegelt. Das verwirrt den Kunden und ist nicht zielführend.

Zudem kann ein Iconfont projektbezogen und individuell für einen Kunden erstellt werden, sodass nur die Daten geladen werden, die tatsächlich für das Projekt verwendet werden. Für die Iconfont-Erstellung bei Icomoon habe ich ein simples Icon (Energieversorgung) mit Hilfe eines Grids in Adobe Illustrator erstellt. Dieses habe ich als SVG-Datei (ohne Grid) gespeichert.

Steckdose Icon

Wichtig für einen eigenen Iconfont ist es die Icons einheitlich, in derselben Stilrichtung, zu gestalten.
Auf https://icomoon.io/app bietet “Icomoon” die Möglichkeit SVG-Dateien zu importieren und in einen Iconfont umzuwandeln. Diesen kann man herunterladen und wie z.B. fontawesome ins Projekt einbinden. Die Icons sind also skalierbar und ebenfalls vollständig über CSS definierbar.

Fazit meiner Recherche ist vorerst, dass der Einsatz von bereits vorhandenen Iconfonts sicherlich einfacher ist und Zeit spart. Sinnvoll ist es auch in dem Hinblick, dass es unglaublich viele Icons mit gewohnten Piktogrammen z.B. für Email (Briefumschlag) oder Telefon (Telefonhörer) bereits gibt und diese auch kostenlos verwendet werden können.

Effektiver kann es allerdings sein einen eigenen Iconfont zu erstellen, wenn Individualität gewünscht ist oder, auf die Website inhaltsbezogene Icons, im Netz gar nicht zu finden/vorhanden sind. Hierfür bietet “Icomoon” einen sehr guten Service.

In einem bald folgenden zweiten Teil gehe ich genauer auf die Erstellung eigener Icons ein und der anschließenden SVG-Einbindung ohne generierten Iconfont.

data-url="https://epunks.de/blog/artikel/mein-erster-schritt-zum-eigenen-iconfont-46.html" data-services="["facebook","twitter","xing","googleplus","linkedin","info"]"