Tipps und Tricks für die Erstellung einer eigenen Icon-Font

von Michaela Schammler 0
Frau zeichnet an Ihrem Arbeitsplatz

In diesem Beitrag geht es um die Erstellung und Verwendung von Icon Fonts. Wie in dem vorherigen Blogbeitrag „Die Vor- und Nachteile von Icons und Icon-Fonts“ beschrieben ist, sind Icon-Fonts Schriften, welche anstatt Buchstaben ausschließlich grafische Elemente bzw. Vektorgrafiken enthalten. Doch bei der Erstellung einer Icon-Font sind einige Dinge zu beachten, damit Sie eine fehlerfreie Icon-Font erhalten.

Inhaltsverzeichnis

  1. Wie werden Icon-Fonts erstellt?
  2. Was muss beim Erstellen beachtet werden?
  3. Wie und wo werden Icon-Fonts angewendet?
  4. Wann lohnt es sich eine Icon-Font zu nutzen?
  5. Können Icon-Fonts kostenlos genutzt werden?

Wie werden Icon-Fonts erstellt?

Icon Fonts können mithilfe eines Icon-Font-Generators wie z.B. Icomoon oder fontello erstellt werden. Dabei besteht die Möglichkeit eigene individuell erstellte Icons hochzuladen und als fertig generierte Icon-Font zu downloaden. Zudem bieten die Icon-Font-Generatoren oftmals kostenlose Icons an, welche beliebig in die eigene Icon-Font integriert werden können.

Screenhout vom Fontello Icon-Font-Generator

Was muss beim Erstellen einer Icon-Font beachtet werden?

Bei der Erstellung einer Icon-Font muss sowohl technisch, als auch gestalterisch einiges beachtet werden, um Fehler zu vermeiden. Alle Dateien bzw. Icons, welche in die Icon-Font integriert werden sollen, müssen im SVG-Format sein. Die SVG-Dateien dürfen keine Pixelbilder enthalten und sollten ausschließlich aus Vektoren bestehen. Alle Vektoren bzw. Pfade müssen geschlossen sein. Falls Sie bei Ihren Icons Konturen verwenden, so müssen diese in Pfade umgewandelt werden. Des Weiteren dürfen keine Farbverläufe und andere Effekte wie z.B. Schlagschatten angewendet werden. Alle Icons sollten idealerweise nur einfarbig sein. Damit alle Icons gleichmäßig skaliert werden können, sollten diese die gleiche Größe haben und nicht aus zu vielen einzelnen Elementen bestehen. Die Icons sollten möglichst einfach und stilisiert gehalten sein, damit diese auf möglichst vielen Print- und Digitalmedien reproduziert werden können.

Vektorgrafik und Pixelgrafik im Vergleich

Wie und wo werden Icon-Fonts angewendet?

Icon Fonts können problemlos in Ihre Website oder Ihren Online Shop eingebettet werden. Für Ihre Printmedien können Sie die gleiche Icon-Font auch nutzen. Dazu muss die Icon Font wie eine normale Font auf Ihrem Computer installiert werden und kann von verschiedenen Programmen, wie z.B. Adobe Photoshop oder Adobe InDesign genutzt werden. Sie können Ihre Icons in jedes Printprodukt integrieren und wie eine normale Schrift bearbeiten. Die Größe, Farbe und Anordnung kann dabei frei bestimmt werden.

Wann lohnt es sich eine Icon-Font zu nutzen?

Wenn Sie mehrere Icons nutzen möchten, ist es sinnvoll daraus eine Icon Font zu erstellen. Sie können jederzeit auf Ihre Icons zugreifen und haben alle beisammen. So wird die Nutzung Ihrer Icons erheblich erleichtert. Dadurch, dass alle Icons in einer Datei integriert sind, fällt die Dateigröße weitaus geringer aus, was dazu beitragen kann, dass Ihre Icons eine schnellere Ladezeit haben.

Glyphen in Photoshop

Können Icon-Fonts kostenlos genutzt werden?

Für die Erstellung Ihrer Icon-Font können Sie sowohl kostenlose, als auch kostenpflichtige Anbieter nutzen. Dabei bleibt es Ihnen überlassen, welche Funktionen und Dienstleistungen gebraucht werden. Die Nutzung Ihrer fertiggestellten Icon-Font ist meistens mit keinen weiteren Kosten verbunden.

Illustration einer Glühbirne

Interesse geweckt?

Wenn Sie Interesse an einer individuellen Icon-Font haben, dann können Sie sich gerne bei uns melden.

Jetzt anfragen

Der Beitrag gefällt? Brüllen Sie ihn heraus!

Einen Kommentar schreiben

Datenschutzerklärung*: Sie erklären sich damit einverstanden, dass Ihre Daten zur Bearbeitung Ihres Anliegens gemäß der Datenschutzerklärung verwendet werden. Weitere Informationen und Widerrufshinweise gibt es in der Datenschutzerklärung.

Zurück