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.

Screenshot von Fontastic

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.

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.