Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 11. März 2013

So geht’s: Genericons – 62 Vector-Icons als Webfont von den WordPress-Machern

Nicht nur die Verbreitung mobiler Devices steigt rasend schnell, auch die Darstellungsmöglichkeiten der kleinen Helfer erreichen eine Qualität, auf die wir an unseren Computerbildschirmen noch immer warten. Der Trend zu immer höher auflösenden Screens, zusammengefasst unter dem Begriff HiDPI, verursacht nicht nur, aber auch im Webdesign Handlungsbedarf. Wer schon einmal eine nicht auf Retina optimierte App auf einem aktuellen MacBook Pro gesehen hat, der weiß, wovon die Rede ist. WordPress-Macher Automattic reagierte mit dem letzten Update der Blog-Software und baute dort retina-fähige Icons als Webfont ein. Vor einigen Tagen veröffentlichten sie zudem Genericons, ein Set von 62 Vektor-Icons als Webfont…

Anzeige

genericons

Vektoren, Icons, Webfont – Vorgehensweise der Zukunft

Die Genericons stehen unter GNU Public License zur kostenfreien Verwendung für jedermann zur freien Verfügung und können von der eigens dafür geschaffenen Website herunter geladen werden. Automattic positioniert die Symbol-Schriftart als „flexiblen Icon-Font für Blogs“. Es ist allerdings nicht so, dass es eine erkennbare, quasi natürlich Begrenzung der Verwendbarkeit auf Blogs gäbe. Vielmehr sind die Genericons prinzipiell auf jeder Website nutzbringend einsetzbar.

Anzeige

Der rund 54kb große Download legt ein Zip-File auf Ihrer heimischen Festplatte ab, das neben den für den Einsatz als Webfont erforderlichen Dateien, wie CSS, EOT, SVG und TTF auch umfangreiche Beispieldarstellungen enthält. Zusätzlich liefert Automattic eine OTF-Version des Icon-Fonts mit, die als Schriftart in das eigene OS eingebunden werden kann, um die Genericons etwa bereits in Photoshop oder anderen Applikationen nativ verwenden zu können.

genericons-scaled
Genericons hochskaliert. Die Optik bleibt kantenscharf.

Genericons sind frei skalierbar und von daher bestens für alle Arten von HiDPI-Geräten geeignet. Die Einbindung in die eigene Website ist schnell erledigt und kann auf verschiedene Arten erfolgen. Zunächst muss der im Zip-File enthaltene Ordner fontin den Stylesheet-Ordner Ihres Webprojekts hochgeladen werden.

a) Übernahme des CSS in das Haupt-Stylesheet und Icon-Definition

Eine Methode der Verwendung ist es, den folgenden Code in das eigene Haupt-Stylesheet zu übernehmen:

/* =Genericons, thanks to FontSquirrel.com for conversion!
-------------------------------------------------------------- */
@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Ein Icon wird dann wie folgt definiert:

.my-icon:before {
    content: '\f101';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'Genericons';
    vertical-align: top;
}

Mit dieser Definition würde man erreichen, dass jedem Element, dem man die Klasse my-icon zuweist, ein Kommentar-Icon vorangestellt würde. Die Ansteuerung des jeweiligen Icons erfolgt über den Wert f101.

Die Website des Projekts dient nicht nur als Download-Basis, sondern bietet einen Helper an, mit dem man die korrekte Buchstaben-Zahlen-Kombination für jedes Icon abrufen kann. Einfach das gewünschte Icon anklicken, Copy CSS wählen und den Inhalt des sich öffnenden Popup über die Zwischenablage übernehmen.

b) Verwendung der Genericons.css

Alternativ können Sie auch für die einfachere Methode entscheiden. Diese besteht darin, neben dem Ordner font das Stylesheet genericons.css innerhalb der HTML-Seite einzubetten:

Nun kann im HTML mit Klartext-Namen der eigentlichen Icons gearbeitet werden. Etwa so:

Das ist ein Kommentar

Dieses Beispiel würde wieder das eben bereits erwähnte Kommentar-Icon einfügen, allerdings nicht unter Verwendung von f101, sondern mit Hilfe des sprechenderen genericon-comment.

Auch hier leistet der Helper auf Genericons.com beste Dienste. Klicken Sie das gewünschte Icon an, wählen Sie Copy HTMLund übernehmen Sie das im Popup angezeigte Ergebnis über die Zwischenablage in Ihr Dokument. Die Icons können naheliegenderweise nicht nur auf Div-Elemente angewendet werden. Ersetzen Sie entsprechend.

Pseudo-Selektoren können mit dieser Methode nicht angesprochen werden. Hierzu ist Vorgehensweise a) zu wählen, respektive die genericons.css entsprechend zu erweitern.

Noch ein genereller Hinweis: Die Genericons wurden für ein Grid von 16 x 16 Pixeln entwickelt. Man sollte sie entsprechend nur mit Mehrfachen des Ausgangswertes skalieren, etwa 32 x 32 oder 48 x 48. Auch Werte dazwischen, etwa 24 x 24 schauen noch ganz gut aus. Auf ungerade Werte, etwa 17 Pixel, sollte man verzichten.

One more thing: Für den Fallback im IE 7 und darunter müssen Sie selbst sorgen. Genericons kümmert sich um diese Problematik im CSS nicht und liefert auch keine entsprechenden Icons mit.

Links zum Beitrag

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

5 Kommentare

  1. Es gefällt mir sehr gut, dass Automattic nun auch Icon Fonts zu Verfügung stellt. Zwar ist die Auswahl noch etwas bescheiden. Aber das wird sich sicherlich ändern. Über Vor- und Nachteile zu sprechen, ist meiner Ansicht nach an dieser Stelle unangebracht.

  2. Hm. Ich sehe da jetzt keinen Vorteil gegenüber bspw. Icomoon.

  3. Schicke Icon-Font.

    Bisher habe ich immer die Icon-Font Font Awesome eingesetzt.
    Auf der Seite sind auch ein paar schöne Beispiele zu finden,
    wie damit Buttons und Eingabefelder realisiert werden können.

Schreibe einen Kommentar

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