Icons im Webdesign in Webfonts verwalten

CSS Sprites und ich sind nie große Freunde geworden. In manchen Fällen von der SEO-Fraktion als überlebenswichtig gebrandmarkt, bieten die Grafiken meines Erachtens mehr Nachteile als Vorteile. Es fängt schon dabei an das ich ein CSS Sprite erst mit einer entsprechenden Vorarbeit erstellen kann. Anschließend sitzt man da – mit welchen Tools auch immer – um die Icons wiederzufinden. Bootstrap2 hat seine glyphicons zum Beispiel in einem Sprite verpackt.

Die Sprites sind alle schön und nett, so lange der Kunde nicht auf die Idee kommt das man größere oder kleinere Icons braucht. Für den Fall hat man dann schön in das Klo gegriffen. Wirft man einen Blick ins Bootstrap3 wird man als eine der größeren Änderungen bemerken, dass die CSS Sprites weg sind. Stattdessen findet man einen Webfont, auf dessen einzelnen Zeichen mittels CSS zugegriffen werden kann. Die dazugehörige Technik ist ganz einfach, man muss nur den Code des jeweiligen Buchstaben kennen:

.glyphicon-asterisk:before {
    content: "\2a";
}

Es gibt inzwischen Dienste wie zum Beispiel Fontello, wo man sich die Fonts schnell zusammen klicken kann. Man kann aber auch zu einem Dienst gehen wo man sich aus 4200 freien Icons eine eigene Sammlung zusammen klicken kann, oder man nimmt direkt einen fertigen Webfont was in der Regel ausreichend ist. Generell sollte man bei so etwas allerdings drauf achten, das man die Möglichkeit besitzt den Font nachträglich zu ändern.

Ähnliche Beiträge

Sprite Cow – CSS Sprite nach CSS CSS Sprites sind höchst nützliche kleine Dinger, um Ladezeiten zu verkürzen, vor allem wenn man ein passendes Caching / Expire im Apache damit verbind...
FitText – immer passende Textgrößen Content Management Systeme haben ihre Probleme - man rechnet nämlich selten mit der Heimtücke der Redakteure. Man bekommt hoch und heilig versprochen ...
CSS Sprite Generator CSS Sprites sind meistens eine nette Sache, wenn auch mit einigen Unzulänglichkeiten bei diversen Browsern versehen. Zusammenfassend kann man sagen, d...
Lettering.js für jQuery Ich fürchte die Sache mit den Webfonts ist noch lange nicht ausgestanden, zum einen kämpft man ständig mit Unstyled Content, zum anderen können die Br...

Eine Antwort auf „Icons im Webdesign in Webfonts verwalten“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.