Icon-Fonts individuell erstellen

Icon-Fonts sind Schriftarten, welche anstelle von Buchstaben oder Zahlen, Piktogramme oder Icons enthalten. Diese haben einige Vorteile. Wie Sie Ihre eigenen Icon-Fonts erstellen können, erklären wir hier.

Vorteile von Icon-Fonts

Gerade für die Verwendung im Web sind diese Schriftarten besonders geeignet:

• Viele Icons können in einer Datei gekapselt werden, die nur zu einer HTTP-Anfrage am Server führt.
• Zeichen aus Schriftarten könne ohne Qualitätsverluste vergrößert werden und sehen auch bei High-Density-Displays gut aus.
• Neue Farben oder Effekte lassen sich einfach und unkompliziert per CSS darauf anwenden.

Individuelle Fonts als optimale Lösung

Oft benötigt man allerdings eigene Vektorgrafiken oder eine Kombination von Icons aus verschiedenen Fonts. Hierbei ist der optimale Weg, sich einen eigenen Icon-Font zu erstellen.

Grundlagen eigener Icons

Icons können einfach in Vektor-Programmen wie Adobe Illustrator oder Inkscape erzeugt werden. Auf folgende Punkte sollte geachtet werden:

• Die Flächen sollten vereint sein und dürfen nicht überlappen, Öffnungen müssen ausgespart werden.
• Die Icons sollten einfarbig sein, nur so können sie später von gängigen Browser korrekt interpretiert werden.
  
• Icons sollten außerdem gleich groß sein, damit nicht jedes per eigener Schriftgröße angepasst werden muss.

Jedes Icon wird als quadratische SVG-Datei exportiert, in der es am besten die komplette Zeichenfläche ausfüllt.

Font mit Hilfe von icomoon erstellen

Unsere Icons, welche wir gerade erstellt haben, fügen wir nun der Web-App icomoon.io hinzu. Über „Import Icons“ wird ein neues Set aus den Icons erzeugt.

Ein großer Vorteil dieser App ist, dass dem Nutzer standardmäßig schon eine Vielzahl kostenloser Sets zur Verfügung stehen, aus denen Icons genutzt werden können. Ein vorheriger Blick lohnt sich also.

Jetzt wählen wir die Icons aus unserem Set aus, die in den Font aufgenommen werden sollen, und klicken auf „Generate Font“. Im nächsten Dialog können noch Name und Zeichenbelegung angepasst werden. Dann können wir die Schrift herunterladen.

Einbindung in die Seite

Im heruntergeladenen Ordner befindet sich neben der Schriftart auch ein Demo, aus dem der Workflow der Einbindung auch für Laien gut abgeleitet werden kann:

1. Hochladen aller Font-Dateien aus dem Font-Ordner auf den eigenen Webspace
2. Einbindung per CSS @font-face (siehe CSS-Datei des Demos, lediglich den Dateipfad noch anpassen)
3. Icons können per Klasse oder HTML-Entity aufgerufen werden, der Code dazu findet sich im Download-Fenster von icomoon
   

Und schon verfügen Sie über Ihr eigenes Icon-Font und können damit Ihre Seite individualisieren. Falls Sie zu diesem Thema noch Fragen haben, schreiben Sie uns gern ein Kommentar!