Iconfonts: spezielle Webfonts mit vielen Möglichkeiten

Icons sehen nicht nur gut aus, sondern sind für responsive Gestaltung platzsparende, dennoch ausdrucksstarke Alternativen, z.B. für Text-Buttons. Ein einfaches „+“ benötigt auf kleinen Smartphone Displays eben viel weniger Raum, als der Satz: „lesen Sie mehr“. Die wohl effektivste Möglichkeit, mehrere Icons in eine Website zu integrieren, ist ein Iconfont.

Ein Iconfont: was ist das?

Vereinfacht: ein Iconfont ist ein Webfont mit Zeichen anstatt der Buchstaben. Mit einem Unterschied. In vielen Iconfonts lassen sich die Zeichen zwar per Code einfach aufrufen, aber nicht über die Tastatur. Warum? Jede Schrift hat festgelegte Positionen für die Buchstaben, Satzzeichen und spezielle Zeichen, wie Pfeile. Für alle anderen bietet die Zeichentabelle einen freien Bereich, in den beliebige Zeichen eingefügt werden können. Dort sind die Icons meistens platziert. Ein Iconfont ist also ein Webfont, wird aber anders verwendet.

So setzt man die Icons ein

Meist werden alle benötigten Icons für ein Projekt in einen eigenen Webfont gepackt, der wie gewohnt per CSS mit den Schriften eingebunden wird. Für jedes benötigte Icon wird dann eine CSS-Klasse definiert, die bestimmt, welches Sonderzeichen vor (oder nach) einem Textabschnitt, dem die Klasse zugewiesen wird, angezeigt wird.

Ein Beispiel:

Im HTML wird Elementen, z.B. Texten oder Links, die ein Icon haben sollen, einfach eine Klasse hinzugefügt.
<span class=„Klassenname„>Etwas Text, vor den das Icon gestellt wird</span>

Im CSS wird diese Klasse definiert. In ihr wird beschrieben, wie das Icon aussehen soll.

.Klassenname:before {
font-family: „meineIcons“;
content: „\f10c“;
font-style: normal;
font-weight: normal;
<!–hier können beliebige weitere Styles für das Icon stehen?
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

Der Iconfont wurde vorher schon eingebunden. Übrigens, über die Media Queries lassen sich die Icons für jedes Geräte individuell formatieren.

Woher bekommt man Iconfonts?

Viele Iconfonts haben Open Source Lizenzen und sind auch für kommerzielle Projekte kostenlos nutzbar. Allerdings freuen sich viele der Entwickler über eine kleine Spende. Einige der Verzeichnisse, mit Links oder direkten Downloads findet Ihr weiter unten.
Hosting-Services speziell für Iconfonts, ähnlich wie Google Web Fonts, gibt es auch. Zum Beispiel: http://weloveiconfonts.com/.

Eigene Iconfonts erstellen

Wenn z.B. das Kundenlogo oder andere spezielle Icons verwendet werden sollen, braucht Ihr einen eigenen Iconfont. Kein Problem: auf Websites wie https://icomoon.io/ könnt Ihr SVG Grafiken hochladen und daraus direkt einen einen Iconfont erstellen. Die dazugehörige CSS-Datei mit fertigen Klassen, die wie die einzelnen Grafiken benannt sind, gibts gleich dazu.

Was man beachten sollte

Zum einen sind Icons in Iconfonts Vektoren und werden erst im Browser gerendert. Je nach Engine fällt das Antialiasing unterschiedlich aus. Je kleiner das Icon dargestellt wird, desto mehr Details, z.B. negative Linien innerhalb der Zeichen, können verloren gehen. Zum anderen sind zwei- oder dreifarbige Icons mit Iconfonts leider nicht darstellbar.
In beiden Fällen muss man auf andere Grafikformate zurückgreifen.