IcoMoon - Eine App für Icon Fonts

Nachdem gestern Fontello, ein Online Tool zum Zusammenstellen von Icon Fonts die Runde gemacht hat (und seitdem nicht mehr wirklich erreichbar zu sein scheint), ist mir aufgefallen, dass der entsprechende Dienst für Icon Fonts, den ich selbst schon eine Weile nutze, noch nicht wirklich bekannt zu sein scheint.

Die Rede ist von IcoMoon, das es bereits seit Ende letzten Jahres gibt und an das sich Fontello anscheinend anlehnt. IcoMoon wird ständig verbessert und mit weiteren (u.a. eigenen) Icons aufgewertet.

Wie funktioniert das Ganze?

Über die hauseigene App ist man in der Lage, spielend leicht individuell angepasste Icon Fonts zusammenzustellen, ohne später all jene Icons eines Fonts, die man nicht benötigt, als unnötige Performance-Bremse mitzuschleppen. Fein ist auch, dass einem beim Generieren des Fonts sofort sämtliche Formate für die Integration per @font-face samt CSS-Datei und Demo in eine knackige zip-Datei gepackt als Download bereitstehen, ohne dafür nochmals externe Tools nutzen zu müssen.

Man kann der entstehenden Schriftart sogar einen selbstgewählten Namen verpassen und den einzelnen Icons die gewünschten Keys mitgeben. Außerdem ist es möglich, die Icons zu bearbeiten und sogar eigene, lokale Icons hochzuladen, um sie dann in die zu generierenden Web Fonts zu integrieren.

[Update, 18.06.2012:] Wieder einmal hat ein feines Update stattgefunden. Neben den 95 neuen Icons gibt es nun die Möglichkeit Zusammenstellungen lokal zu speichern und später wieder aufzurufen.

Und was ist mit Screenreadern?

Eine berechtigte Frage, da Screenreader die unpraktische Angewohnheit haben, per CSS generierten Content mit vorzulesen. Dem wollte IcoMoon einen Riegel vorschieben und hat bereits im vergangenen Dezember mit der Option "Private Use Area" eine Lösung implementiert, die in Kombination mit aria-hidden="true" gut zu funktionieren scheint.

icomoon_sr

Um den praktikablen Einbau von Icon Fonts auch im Hinblick auf Screenreader nachzuvollziehen, empfehle ich die IcoMoon Docs und zudem den ausführlichen Artikel von Chris Coyier.

Frei oder unfrei?

IcoMoon bietet seinen Dienst als Free Version mit reduziertem Umfang an. Wer das ganze Paket samt kommender Updates in Sachen Icons und lokalen Downloads (PNG, SVG, PDF, IA) möchte, der wirft dem Macher einfach ein Paar Moneten hin. Ab 39$ ist man dabei und ich finde das äußerst fair, weshalb ich es gerne tat.

Wozu eigentlich Icon Fonts?

Viele denken aktuell noch, dass Icon Fonts eher eine Art Spielerei darstellen, um zu zeigen, was denn so alles in Sachen Web Fonts machbar ist. Aber deren Bedeutung ist meiner Meinung nach bereits jetzt schon deutlich höher einzuschätzen. Gerade in Zeiten von immer mehr ultra hoch auflösenden Retina-Displays wie das des iPad 3 und den gerade vorgestellten Mac Books ist es ein unglaublich hoher Aufwand, jedes Mal alle Icons für ein Webprojekt samt den dazu nötigen Sprites ständig auf aktuellstem Stand und auch noch in zwei Varianten bereit zu halten.

Icon Fonts bieten unschlagbare Features wie die stufenlose Skalier- und Formatierbarkeit. Somit hat man nicht nur die komplette Kontrolle über das Erscheinungsbild in Sachen Farbe, Schatten und Größe, sondern kann sich auch sicher sein, dass sie auf Retina-Geräten gestochen scharf daherkommen. Ich habe bereits mehrere Projekte mit diesen Icon Fonts ausgestattet und möchte sie keinesfalls mehr missen.