IcoMoon & Stackicons — Icon-Fonts optimal nutzen

Icon-Fonts liegen total im Trend. Klar, sie bieten unzählige Vorteile. Sie sind einfach skalierbar, ressourcenschonend und leicht konfigurierbar. Vor Weihnachten stellte ich euch den Webdienst Fontello vor, damit läuft das Erstellen eigener Iconsets spielend. Aber beim Einsatz des Generators gilt es, einige Dinge zu beachten. Neben den implementierten Schriftarten können genauso eigene SVG-Fonts hochgeladen werden. Dabei treten oftmals unschöne Verschiebungen auf. Diese muss man nachträglich via CSS wieder ausbügeln. Ich war längere Zeit auf der Suche nach einem vernünftigen -Logo als auch dem aktuelleren -Zeichen. Doch bei beiden hatte ich so meine lieben Probleme. Fontello ist jedoch nicht der einzige Dienst, welcher das Handling von Symbol-Schriften gestattet. IcoMoon verfügt ebenso über dieselben Möglichkeiten.


IcoMoon App – Quick Usage Demo

Der Import zusätzlicher SVG-Schriften scheint hier besser zu funktionieren. Platzierungsprobleme tauchen eher selten auf. Eine anschließende Weiterverwendung in Fontello bereinigt die beschriebenen Fehler. Hinsichtlich ihrer Schrift-Bibliotheken unterscheiden sich beide Anwendungen. IcoMoon bietet folgende Sets: IcoMoon, Linecons, Eighty Shades, Font Awesome, Broccolidry, Steadysets, Entypo, Typicons, Brankic 1979, Eco Ico, Meteocons, WebHostingHub Glyphs, wpzoom, Iconic und Fifty Shades of Icons. Fontello hingegen vereint Fontelico, Font Awesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons und Web Symbols miteinander. Wenn man nur bestimmte Symbole benötigt, sind diese mitunter großflächig verstreut.

Um aber möglichst performanceorientiert zu arbeiten, sollten die Fonts kompakt sein. Am Ende spielt es keine Rolle, welcher Service verwendet wird. Lediglich unter Nutzung externer Schriften sollte man IcoMoon mehr Vertrauen schenken. Dann klappt das Werkeln mit Icon-Fonts nahezu perfekt.

Stackicons — Mach mehr aus Icon-Fonts

Webdesigner Parker Bennett zeigt mit Stackicons sehr eindrucksvoll, was Symbol-Schriften leisten können. Das Projekt ist noch recht jung, verdeutlicht allerdings schon jetzt ein umwerfendes Potenzial. Normalerweise kann eine SVG-Webschrift nur aus einer Ebene bestehen, daher ist Text ausschließlich einfarbig möglich. Durch gezielte Zerlegung in mehrere Zeichen und anschließende Überlagerung entsteht ein Multi-Color-Effekt. Das Symbol erweckt nun den Eindruck täuschend echt zu sein. In seinem CSS-Tricks-Artikel erklärt Bennett konkret den Einsatz von Stackicons. Ebenso setzt er auf Sass, kommt leider auch selten vor. Ich finde das Projekt extrem gelungen. Bilder oder CSS-Sprites verschwinden immer mehr in der Versenkung. Den Icon-Fonts gehört eindeutig die Zukunft.

merfarbige Text-Symbole mit Stackicons verwenden
merfarbige Text-Symbole mit Stackicons verwenden


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.