Fontello: Einfacher Icon Font Generator für Webdesigner

Vor wenigen Tagen stand ich vor einem kleinen Problem. Durch die Rückkehr zu App.net wollte ich natürlich ebenso den Link zu meinem Profil im Kopfbereich meines Blogs hinzufügen. Aber es fehlte an dem benötigten Platz. Also musste mir etwas Neues einfallen. Die Lösung — Symbol-Schrift. Schön und gut, aber eine 40 KB bis 200 KB große Schrift wollte ich nicht einbinden. Das erschien mir für den Zweck eindeutig zu gewaltig. Nach kurzer Recherche im Web landete ich bei Fontello. Auf dieser Webseite werden einige sehr gute und bekannte Icon-Fonts gebündelt. Aus mehreren Hundert Symbolen könnt ihr euch eure Schrift frei generieren. Dabei spielt es keine Rolle, ob beispielsweise Font Awesome, Iconic oder Zocial. Prima, es landen nur die notwendigen Zeichen im Töpfchen. Sollte euch die angebotene Sammlung ungenügend erscheinen, dann könnt ihr selbstständig eigene SVG-Grafiken oder SVG-Schriften hochladen.

Fontello — Icon Font Generator in Aktion
Fontello — Icon Font Generator in Aktion

Einstellungstechnisch bietet Fontello ebenfalls viel an. Neben der Festlegung des Icon-Namens, Klassenpräfix, Schriftgröße, ermöglicht der Generator auch das Beeinflussen bestimmter Maßangaben, Font Hinting und Zeichenkodierung. Über die Import-Funktion lassen sich existierende SVG-Schriften integrieren. Das könnten zum Beispiel sogar frühere Schriften von Fontello sein. Also selbst einfache Erweiterbarkeit wird garantiert. Wurden alle Einstellungen vorgenommen, ladet ihr euch die fertige Webfont herunter. Entpackt sie auf eurem Computer. Wichtig sind nun der Ordner font, sowie die fontello.css. Beide müsst ihr in euer Webprojekt einfügen. Alle anderen Bestandteile sind mehr oder minder optional. Hier ein kurzes Beispiel wie ihr sehr einfach ein Icon anzeigt:

<i class="icon-INCONNAME"></i>

Simpler kann das Erstellen eigener Symbol-Schriften meiner Auffassung nicht sein. Selbst ein blutiger Anfänger kommt damit spielend leicht zurecht. Zusätzlich bringt Fontello positive Nebeneffekte mit. Die Schriften sind optimiert, da sie nur benötige Zeichen enthalten. Solche Schriftsätze haben definitiv Zukunft. Früher musste man dafür immer einzelne Bilder verwenden oder sogenannte CSS-Sprites. Damit dürfte bald Schluss sein. In den meisten Fällen verstehen beinahe alle Browser diese Schriftarten. Der Kompromiss zwischen Symbolen, einfacher Handhabung und der Speichergröße ist praktikabel. Verwendet ihr schon Icon-Fonts oder wollt ihr in absehbarer Zeit welche verwenden? Schreibt mir eure Meinung und Erfahrung in die Kommentare.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.