Skalierbare Icon Fonts nutzen

1 | 34841 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Skalierbare Icon Fonts nutzen" mit Ihrem Wissen!

Anzeige Hier werben

Eine Grafik in eine Webseite einzubauen ist kein großes Kunstwerk. Auch in Kombination mit Text bestehen wenig Komplikationen, vor allem wenn das Design sehr statisch ist und so gut wie immer gleich aussieht. Smartphones und Tablets schütteln aber heutzutage stark an dieser Statik. Ein Trend ist es, dass eine Webseite für alle Plattformen ansehnlich sein soll, das heißt die Seiten sollen flexibel sein und sich dem Ausgabegerät anpassen. Rein auf die Inhalte bezogen ist das in Ordnung. Textgrößen lassen sich problemlos mit dem CSS-Befehl font-size variieren und durch JavaScript lässt sich vorher die Auflösung erkennen.

Bild zu Skalierbare Icon Fonts nutzen

Grafiken hingegen benötigen etwas mehr Aufmerksamkeit. Kombiniert man Texte und Grafiken (z. B. für einen Button), so kann es frickelig werden. Skalierbare Grafiken wären nun eine gute Sache. Die gibt es, nennen sich Vektorgrafiken und werden meist im SVG-Format abgespeichert. Doch die Freude währt nur kurz: Nicht jeder Browser kommt positiv mit SVG aus und in Zeiten von IE, Firefox, Chrome, Safari, Opera, usw. wäre es Gift sich nur auf ein oder zwei Browser zu konzentrieren.

Icon Fonts als Lösung

Also muss eine andere Lösung her und diese nennt sich „Icon Fonts“. Der Name ist der im Grunde selbsterklärend und die Idee auch nicht unbedingt neu. Wer die Schriftart „Wingdings“ kennt (und sich in frühen Tagen noch gewundert hat, wozu sie gut sein soll), könnte schon leise erahnen worauf dieser Artikel abzielt.

Icon Fonts sind Schriftarten, die Symbole (engl.: „icon“) statt Buchstaben beinhalten. Dadurch können Grafiken ebenso behandelt werden wie „gewöhnliche“ Schriften, d. h. sie können mit CSS sehr flexibel modifiziert werden. Und so schlagen wir die Brücke zu font-size.

Erste Schritte

Mittlerweile gibt es etliche Designer, die Icon Fonts entworfen haben und stellenweise kostenfrei zur Verfügung stellen – lediglich eine Nennung wird in der Regel verlangt. Etliche lassen sich bei Delicious.com finden.

Wer es schnell und bequem haben möchte, dem sei Font Awesome ans Herz gelegt, da es den Start sehr bequem gestaltet. Zum einen durch eine (nahezu) fertig konfigurierte CSS-Datei und zum anderen durch eine kleine Installationsanleitung auf der Seite, die andere oft leider vermissen lassen (auch wenn die Art und Weise stets die Gleiche ist, so kämen man Neulingen in der Thematik entgegen).

Bild zu Skalierbare Icon Fonts nutzen

Allerdings zeigt sich Firefox mitunter nicht kooperativ. Stellt der Mozilla-Browser sämtliche Symbole auf der Webseite von Font Awesome problemlos dar, kann es passieren, dass beim Einbauen in seine eigene Seite das Rendern fehlschlägt. Das Problem ist bereits bekannt, eine allgemeingültige Lösung wurde aber anscheinend noch nicht gefunden.

Das Einbinden von Symbolen von Font Awesome

Man sollte sich nicht verwirren lassen, wenn man etwas von Twitter Bootstrap liest, denn es geht auch ohne und ist keineswegs kompliziert. Lädt man sich die ZIP-Datei herunter und entpackt diese, sind zunächst die Ordner „css“ und „less“ von Belang. Die darin gespeicherten CSS- und LESS-Dateien werden wie gewohnt im HEAD des HTML-Dokuments eingebunden. Vorsicht jedoch, wenn man die Ordnerstruktur auseinander nimmt. Kopiert man beispielsweise beide Dateien ins gleiche Verzeichnis wie die HTML-Datei, so müssen in den kopierten Dateien die Pfade zu den Schriftarten neu gesetzt werden. Belässt man hingegen alles so wie es ist, so sind keine Veränderungen notwendig.

Das Einbinden eines Symbols ist dann Standard und die Webseite von Font Awesome bietet zahlreiche Beispiele. Im Zentrum steht stets das Verwenden des class-Attributs.

Alles eine Sache der Definition

Wer auf andere Icon Fonts zurückgreifen möchte, der muss sich etwas mehr Arbeit machen, denn man erhält lediglich die Schriftart und eine Vorkonfiguration. Nur die CSS-Datei einzubinden und den entsprechenden Klassenname zu verwenden führt zunächst zu nichts. Erst muss Vorarbeit geleistet werden, die lautet: Den Symbolen selbst eine Klasse zuordnen.

Dies geschieht in der CSS-Datei, die später auch via HTML eingebunden wird. Lädt man eine Icon Font-Vorlage herunter, so ist in der Regel bereits eine CSS-Datei dabei. Diese kann gerne benutzt werden, muss aber nicht.

Eine Klasse ist dann stets wie folgt aufgebaut (hier am Beispiel der Symbolschriftart Entypo):

 
css
1
2
3
4
5
6
.test:before
{
    font-family: 'EntypoRegular';
    content: 'a';
    font-size: 1.2em;
}

In diesem Fall nennen wir unsere Klasse ganz unkreativ „test“. Das in CSS vorhandene Pseudoelement :before bewirkt, dass vor dem Text, der nach dem Aufruf der Klasse folgt das in content genannte Zeichen vorangestellt wird, welches der Schriftart angehört, die wir durch font-family angeben. Da in diesem Fall die Schriftart aber keine Buchstaben, Zahlen oder andere Zeichen beinhaltet, sondern Symbole, erhalten wir das Symbol, welches vom Font Designer als „a“ definiert wurde. Ärgerlich ist dann, wenn der Designer der Schriftart nicht angibt, welches Symbol hinter welchem Zeichen steckt, denn so kommt man um ein Ausprobieren nicht herum.

Bild zu Skalierbare Icon Fonts nutzen

Das angegebene font-size ist nicht immer notwendig. Im Falle, dass Symbole für eine Schriftart eine unpassende Größe haben, so kann man mit einem Wert in em eine Vorskalierung vornehmen und elegant im HTML-Dokument die Schriftgröße mit einer Pixelangabe beeinflussen. Umgedreht klappt es im Übrigen auch, ist aber vermutlich nicht jedermanns Sache.

So kann man den Text nach Belieben in der Größe ändern und das Symbol skaliert automatisch mit. Dabei bleibt das Icon, da es sich um eine Vektorgrafik handelt, wie die folgenden Abbildungen zeigen, stets gestochen scharf.

 
HTML
1
<div style="font-size:40px;" class="test3">Servus</div>
Bild zu Skalierbare Icon Fonts nutzen
 
HTML
1
<div style="font-size:56px;" class="test3">Servus</div>
Bild zu Skalierbare Icon Fonts nutzen

Die Alternative mit HTML5

Je nach Schriftart können viele dieser Definitionsblöcke eine CSS-Datei füllen. Das kann Zeit kosten. Wer nicht auf die fertige Fassung von HTML5 warten möchte, kann es sich aber bequem machen indem man eine neue Kombination aus HTML und CSS nutzt: data-icon.

 
css
1
2
3
4
5
6
.test4:before
{
    font-family: 'EntypoRegular';
    content: attr(data-icon);
    font-size:1.3em;
}
 
HTML
1
<div style="font-size:40px;" class="test4" data-icon="f">Konnichiwa</div>

Anstatt vieler Blöcke mit vielen Klassennamen schreibt man nur einen Block und gibt als Wert für content eine Variable an, die als Attribut in HTML dient und dort je nach Bedarf mit einem beliebigen Wert versehen werden darf. Verwendet man viele Symbole besteht die Kunst sodann natürlich darin zu wissen, welches Zeichen welches Symbol aufruft, denn hilfreiche Klassennamen als Gedächtnisstütze gibt es so nicht mehr.

Der Beginn der Kette

Betrachtet man den Definitionsprozess, so blieb eine Frage bislang unbeantwortet: Woher weiß die CSS-Datei, wo die Schriftarten gespeichert sind? Denn gängige Schriftarten, die sich auf so gut wie allen Desktop-Betriebssystemen finden lassen wie Arial oder Times New Roman nicht hier nicht von Belang. Die Antwort wurde bereits angeschnitten als im vorhergehenden Abschnitt die bereits vorhandene CSS-Datei in vielen Icon Font-Paketen angesprochen wurde. Betrachtet man diese ist auch dieses Glied der Kette augenscheinlich.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@font-face
{
    font-family: 'EntypoRegular';
    src: url('entypo-webfont.eot');
    src: url('entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('entypo-webfont.woff') format('woff'),
         url('entypo-webfont.ttf') format('truetype'),
         url('entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face stellt die Verknüpfung zwischen der Icon Font-Schriftart und der font-family-Angabe dar. Der Name bei Letzterem ist übrigens nicht fest vorgegeben, sondern kann frei gewählt werden.

Fazit

Der heilige Gral sind aber auch die Icon Fonts nicht, denn einen gravierenden Nachteil von Vektorgrafiken können auch sie nicht ausmerzen: die farbliche Eintönigkeit. Ganz wie ihre großen Brüder bestehen auch die Icons aus meist nur einer Farbe gepaart mit einem Alphakanal für die Transparenz. Eine kompakte und frei skalierbare Variante der Mona Lisa im Text ist also auch hiermit nicht möglich.

Nichtsdestotrotz stellen Icon Fonts aber eine (wenn bereits richtig eingebunden) bequeme Variante dar Texte mit Symbolen aufzulockern. Dabei ergeben sich momentan nur wenige Kompabilitätsprobleme. Abgesehen vom bereits erwähnten Problem von Firefox, sind lediglich die Mobilversionen von Opera und Mozilla betroffen. So unterstützt der Android Browser bis einschließlich Version 3.0 dieses Feature nur partiell, 4.0 aber dann schon vollständig. Opera Mini kann hingegen auch mit Version 7.0 noch nichts hiermit anfangen.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Skalierbare Icon Fonts nutzen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Skalierbare Icon Fonts nutzen" hier bearbeiten.

Mitarbeiter