11.7    Icon-Fonts 

In den letzten Jahren sind – zusammen mit den Webfonts – sogenannte Icon-Fonts entstanden. Also Schriftarten, die keine Ziffern enthalten, sondern stattdessen eine große Auswahl an Icons – einfarbige Standard-Icons, die gerne eingesetzt werden, etwa bei Online-User-Interfaces, oder die typischen Social-Network-Icons.

Abbildung 11.91    Hier sind keine kleinen Bilder mehr nötig, sondern Icon-Fonts: fontawesome.io erklärt die Vorteile der Icon-Fonts.

So müssen nicht mehr jedes Mal einzelne Bilder im Bildbearbeitungsprogramm abgespeichert, sondern können recht einfach über CSS eingebunden werden. Dies spart Arbeitszeit und Datenvolumen. Icon-Fonts sind dabei so flexibel, dass sie sich, genau wie »normale« Schriftarten, per CSS beliebig vergrößern und einfärben lassen. So ist ein späteres Anpassen der Größe problemlos möglich und auch der Einsatz bei Retina-Displays. Denn anders als bei Bildern gibt es hier kein Auflösungsproblem.

Die Einsatzmöglichkeiten der Icon-Fonts sind groß: als Social-Media-Icons, große Anführungszeichen bei Zitaten, in User Interfaces, Eyecatcher als Ergänzung zum Text usw.

Abbildung 11.92    Schönes Beispiel für den Einsatz von Icon-Fonts in der Navigation: goldschwarz.at

 

11.7.1    Vor- und Nachteile von Icon-Fonts 

Die Icon-Fonts sind eine der spannendsten Neuerungen der letzten Jahre. Ihre Flexibilität und ihre Bearbeitungsmöglichkeit ähnlich HTML-Texten bieten einem Webdesigner viele Möglichkeiten:

• Sie sind auflösungsunabhängig, also beliebig skalierbar.

• Sie sind immer gestochen scharf (auch bei Retina-Displays).

• Teilweise lassen sich individuelle Zeichensätze erstellen, in denen nur die benötigten Icons eingebunden werden.

• Icon-Fonts ermöglichen eine leichte und flexible Einbindung.

• Das Angebot an hochwertigen Icon-Fonts ist sehr umfangreich.

• Farben und Größen lassen sich schnell per CSS anpassen (und erlauben ein Gestalten im Browser).

• Nutzung von CSS3-Effekten (Schatten, Rotation, Deckkraft)

• Der Hintergrund von Icon-Fonts ist transparent.

• Icon-Fonts sorgen für geringe Datenmengen und weniger HTTP-Requests (im Vergleich zu mehreren Icons als .png-Bildern)

• Die Browserkompatibilität (auch mit älteren Browsern) von Icon-Fonts ist hervorragend.

Abbildung 11.93    Klein, groß, größer – Icons wie hier von fontawesome.io/examples/#larger lassen sich beliebig skalieren.

Gerade bei responsiven Designs und Retina-Displays spielen die Icon-Fonts ihre ganze Stärke aus aufgrund ihrer Auflösungsunabhängigkeit. Alles hat seine zwei Seiten, auch Icon-Fonts. Die Nachteile sind:

• Es sind nur einfarbige Icons möglich (bzw. mit CSS3 auch Verläufe).

• Fonts mit eigenen individuellen Icons zu erstellen und als Fonts umzuwandeln ist sehr aufwendig.

• Einbindung eines zusätzlichen Schriftsatzes, was Speicher beansprucht, vor allem wenn eigentlich nur wenige Icons gebraucht werden. Aber Icons als Bilder beanspruchen natürlich auch Speicher und Ladezeit.

• Man ist auf den Icon-Fonts-eigenen Zeichensatz beschränkt.

• Einige Icon-Fonts kosten Lizenzierungsgebühren.

• Bislang sind Icon-Fonts nur für einfarbige Einsatzzwecke geeignet mit einer beschränkten Auswahl an Zeichen. Wer es also individueller mag, muss wohl doch Bilder nehmen.

Abbildung 11.94    Icon-Fonts sind auch eine nette Textergänzung auf Buttons.

Die Einbindung eines Icon-Fonts unterscheidet sich von Anbieter zu Anbieter. Bei fontawesome.io wird beispielsweise ein HMTL-Code ergänzt, der ähnlich diesem aussieht: <i class="fa fa-home>.

Inline-SVGs | Inzwischen gibt es die Entwicklung, statt mit Icon-Fonts mit sogenannten Inline-SVGs zu arbeiten. Hier wird dann kein eigener Font eingebunden, sondern eine sogenannte SVG-Grafik. Ein exemplarischer Code von der Site genericons.com sieht dann wie folgt aus:

<svg class="genericons-neue genericons-neue-checkmark" width="16px" height="16px"><use xlink:href="genericons-neue.svg#checkmark"></use></svg>

Listing 11.3    Code zum Einbinden einer SVG-Grafik

Auf die Unterschiede bzw. vielmehr die Vorteile der Inline-SVGs geht folgender Artikel ausführlich ein: css-tricks.com/icon-fonts-vs-svg.