Iconfonts nutzen
Iconfonts nutzen

Iconfonts nutzen - Installtion von IcoMoon und erste Schritte

Vorbemerkung

Seit sich mit der zunehmenden Etablierung des CSS3-Standards auch die sogenannten Webfonts immer mehr verbreitet haben, wird eine spezifische Art von Font-Dateien immer mehr genutzt: die ICON-Fonts. Hier sind allerdings in den Schriftartendateien keine regulären Schriftzeichen enthalten, sondern kleine Grafiken, also sogenannte ICONS. Obwohl die mit Hilfe solcher Icon-Fonts dargestellten Grafiken und Symbole naturgemäß nur einfarbig sind (wie normale Schriftzeichen), so haben sie doch einen wesentliche Vorteil gegenüber Grafiken in pixelorientierten PNG- oder JPG-Formaten: sie lassen sich verlustfrei vergrößern. Dies ist darauf zurückzuführen, dass Schriftzeichen (hier als Icons) in ttf-Dateien als Vektorinformationen, sogenannte Glyphen, gespeichert sind.

In manchen Fällen wirft allerdings die Nutzung solcher Icon-Fonts Probleme auf: In der Regel sind die Grafiken in Codebereichen abgelegt, die einen normalen Zugang über die Tastatur erschweren. Dies kann man hier am Beispiel des Fonts Octicons erkennen, bei dem die einzelnen Icons erst im benutzerdefinierten Codebereich abgelegt sind:

Bild "Iconfonts nutzen:zeichentabelle-beispiel-font-octicons.jpg"

Eine Möglichkeit, diese Schwierigkeit zu meistern liefert die Chrome Browser App IcoMoon

IcoMoon - allgemeine Beschreibung

IcoMoon ist ein Iconografie Werkzeug. Mit Hilfe von IcoMoon kann man benutzerdefinierte Iconsets zusammenstellen, verwalten, durchsuchen und anpassen. Insgesamt hat man mit Hilfe dieser Apps Zugriff auf mehr als 4000 unterschiedliche Icons. Ein Vorteil besteht auch darin, dass man mit dieser App soagr offline arbeiten kann. In IconMoon kann man Font-Projekte verwalten und so einmal erstellte Zusammenstellungen weiter bearbeiten. Die Ausgabe des Ergebnisses erfolgt in den üblichen Dateiformaten für Schriftartendateien (WOFF, TTF, SVG, and EOT) sowie in einzelnen Grafikdateien für jedes Icon in den Formaten PNG und SVG. Ein großer Vorteil von IcoMoon besteht darin, dass man selbst entscheiden kann, an welcher Stelle innerhalb einer Schriftartendaten man die einzelnen Icons plazieren will. Dadurch ist es möglich, auf diese Icons so zuzugreifen wie auf Schriftzeichen des normalen Alphabets.

Installation von IcoMoon

IcoMoon funktioniert nur mit Google Chrome. Zur Installation ruft man den Chrome websore auf und sucht nach IcoMoon und klickt auf den Installationsbutton. Nach der Installation erscheint ein Start Icon im Chrome App Launcher.
Bild "Iconfonts nutzen:applauncher-icomoon.jpg"
Wenn man IconMoon startet, wird entweder beim allerersten Strat ein automatisch erstelltes projekt erstellt oder das letzte selbst bearbeitet Projekt:
Bild "Iconfonts nutzen:IcoMoon-neues-projekt.png"

Man kann dann links oben auf die Projektverwaltung klicken und gelangt so in die Projektübersicht:

Bild "Iconfonts nutzen:IcoMoon-projektuebersicht.jpg"

Auf jeden Fall sollte man darauf achten, dass die kostenlose Version von IcoMoon Projekte nur im Browsercache speichert. Wenn man den leert, sind die Projekte weg.

Erstes Projekt mit IcoMoon

Man legt nun also ein neues Projekt an und startet die Bearbeitung

Bild "Iconfonts nutzen:IcoMoon-neues-projekt-bearbeiten-starten.png"

Zunächst sind keine Fonts aktiviert

Bild "Iconfonts nutzen:IcoMoon-neues-projekt-leer.png"

Wenn man jetzt auf Add Icons from Library klickt, erscheint eine Übersicht, mit deren Hilfe man eine oder mehrere Fonts-Ausgangsdateien  aktivieren kann.

Bild "Iconfonts nutzen:IcoMoon-neues-projekt-fonts-hinzufuegen.png"

Im zweiten Teil dieses Tutorials (Eigene Fontdatei zusammenstellen) zu Iconfonts und zur Arbeit mit IcoMoon werde ich erklären, wie man eine eigene Fontdatei erstellt und die Ergebnisse so einer Zusammenstellung zur späteren Nutzung sichert.