Web-Font-Icons erzeugen

Oft liegen Icons als Pixelgrafiken vor, was sich negativ auf die Performance auswirkt, zumal man sie für responsives Design und hochauflösende Displays in verschiedenen Größen vorhalten muss. Aus diesem Grund gehen Designer dazu über, ihre Icons in einen Web-Font umzuwandeln, also als vektorbasierte Schriftzeichen zu definieren. Der Vorteil: Diese sind belie­big skalierbar, gestochen scharf und ihre Dateigröße fällt deutlich kleiner aus.
Schriftzeichen lassen sich zwar nur einfarbig anlegen, doch sind auch bunte Icons möglich, indem man in CSS farbige Formen ergänzt, zum Beispiel ein Rechteck mit abgerundeten Ecken hinter dem Icon oder eines aus verschiedenfar­bigen Web-Font-Zeichen zusammensetzt. Außerdem lassen sie sich mit einem oder mehreren Text­schatten versehen, um einen leichten 3D-Effekt zu erzeugen. Logos kann man ebenfalls als Web-Font-Icon anlegen, vorausge­setzt, die gewünschten grafischen Effekte lassen sich mit CSS erzeugen. Wie Sie Web-Font-Icons produzieren, zeigt der nachfolgende Mini-Workshop.

1. Icons im SVG-Format sichern

Bevor Sie Icons in einen Web-Font umwandeln können, müssen Sie sie in einem Vektortool wie Illust­­­r­ator reinzeichnen. Fügen Sie im Pathfinder alle Teile des Icons zu einem Pfad zusammen. Ausgeblendete Pfade, die Sie im Laufe des Gestaltungsprozesses verworfen haben, lö­schen Sie, da Web-Font-Generatoren wie Fon­tas­tic das Icon nicht umwandeln können, wenn die Datei zu groß ist.
Speichern Sie das Icon als SVG-Datei (nicht »SVG komprimiert«), wobei Sie im Il­lustrator-Dialogfenster das Profil »SVG 1.1« auswählen sollten. Nutzen Sie unbedingt drei Dezimalstufen , denn die Pfadpunk­te beeinflussen die Genauigkeit der späte­ren Grafik. Achtung: Durch die Kompres­sion bei der Umwandlung in Schrift können geringe Qualitätsverluste auftreten und For­men sich minimal verändern.

2. SVG-Icons in Web-Font umwandeln

Laden Sie Ihre Icons in Fontastic über »Add more Icons« oder über »Add Icons to this set« . Wählen Sie dann die SVG-Dateien aus, die Sie integrieren möchten, und ordnen Sie ihnen unter »Customize« die gewünschten Schriftzeichen zu. Bei Unicode nehmen Sie den vierstelligen Code aus der Unicode-Tabelle. Zu­letzt gehen Sie auf den Reiter »Publish«, um Ihren Web-Font in Fontastics Icon Font Cloud zu veröffentlichen oder herunter­zuladen.

3. Mit der CSS-Klasse »Generated Content« tricksen

Damit die Suchmaschinen nicht auf unverständliche Einzelbuch­sta­ben stoßen, sollten Sie die Zeichen, mit denen der Browser ein Icon aufruft, über die CSS-Klasse »Generated Content« oder mit dem Attribut aria-hid­den=”true” in den HTML-Code integrieren.

<div data-icon=”A” class=”icon”></div>

CSS liest das Attribut des Data-Icons als »Generated Content« aus und gibt es mit :before in der richtigen Schrift aus:

[data-icon]:before [
font-family: “iconfontname” !important;
content: attr(data-icon); […]
]

Diese Vorgehensweise ist sinnvoll, weil es sich bei den Icons letztlich um einen Zeichensatz handelt. Das A würde, wenn es einfach als Inhalt zwischen dem öffnen­den und schließenden <div>A</div> stünde, für Suchmaschinen und Sprachausgaben keinen Sinn ergeben.
Noch ein kleiner Tipp zum Abschluss: Erstellen Sie eine Liste mit den Bezeichnun­gen aller Icons und den entsprechen­den Buchstaben oder der Unicode-Nummer, mit denen HTML sie später auf der Website aufruft. Auf diese Weise behalten Sie die Übersicht.

Annika Brinkmann, Mobile-Screen-Designerin und Trainerin, will sich die Gestaltung nicht von den Grenzen der Technik diktieren lassen.