Genericons: Eine kostenlose Icon Font für WordPress-Projekte

Es gibt inzwischen jede Menge Icon Fonts und in einem früheren Artikel habe ich bereits über die sehr beliebte Font Awesome Icon Font (eine Icon Font, die sich vor allem für Bootstrap-Projekte geeignet) berichtet.
genericons-icon-font-for-wordpress
Für unser nächstes WordPress-Theme haben wir uns für die Genericons Icon Font entschieden. Die Font besitzt zwar keine so riesige Icon-Auswahl, aber für die meisten WordPress-Projekte sind die Icons meiner Ansicht nach vollkommen ausreichend. Außerdem ist Genericons Font von Automattic (der Firma des WordPress-Gründers Matt Mullenweg) speziell für den Einsatz in WordPress-Themes entwickelt worden und hat eine Open Source GPL-Lizenz.

Die Genericons Icon Font in ein Theme integrieren

Die Integration der Icon Font in dein WordPress-Theme ist ganz einfach. Du kannst dir den Font-Ordner mit Anleitung einfach auf der Genericons-Webseite herunterladen. Die Icon-font integrierst du dann mit Hilfe von @font-face in deiner style.css Datei (am besten ganz oben). Dies ist der Code, mit dem die Icon Font eingesetzt wird.

@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;
}

Außerdem musst du die Font selbst natürlich noch in deinem Theme-Ordner zur Verfügung stellen. Dazu kopierst du dir einfach den Ordner “font” aus dem gedownloadeten Genericons-Ordner in deinen eigenen Theme-Ordner.

Die Icons im Theme nutzen

Jetzt bist du schon soweit, dass du die Icons in deinem Theme nutzen kannst. Dazu gibt es mehrere Möglichkeiten, du kannst direkt den HTML-Code in deine Template-Dateien einfügen. Den HTML-Code für jedes Icon kopierst du einfach auf der Genericons-Webseite. Dieser Code ist z.B. für das Chat-Icon:

<div class="genericon genericon-chat"></div>

Den HTML Code des Chat-Icons kopieren.
Den HTML Code des Chat-Icons kopieren.

Noch praktischer finde ich es persönlich aber, die Icons über CSS ins Theme zu integrieren. Dazu kopierst du dir wieder auf der Genericons-Seite den CSS Code für das gewünschte Icon, für das Chat-Icon z.B.:

content: '\f108';

Jetzt kannst du mit den folgenden CSS-Eigenschaften das Icon im CSS einbinden:

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

So kannst du auch leicht über die font-size Eigenschaft die Größe des Icons anpassen oder über die color-Eigenschaft deinem Icon noch eine eigene Farbe geben.

Für einen Hover-Effekt könntest du dann diesen CSS-Style einfügen:

.chat-icon:hover:before {
	color: red;
}

Du kannst entweder eine eigene CSS-Klasse für jedes Icon erstellen und diese CSS-Klasse dann entsprechend in deinem Theme verteilen oder du fügst das Icon an eine bestimmte, schon bestehenden CSS-Klasse an. Das kann einfacher sein, wenn du das Icon nur einmalig einsetzen möchtest.

So könntest du beispielsweise ein Edit-Icon vor den Artikel-Bearbeiten Link setzen, indem du ein Icon vor deine entry-edit CSS-Klasse setzt:

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

Das Genericons Edit-Icon in einem Theme eingebunden.
Das Genericons Edit-Icon in einem Theme eingebunden.

Warum Icon-Fonts so praktisch sind

Der Einsatz von Icon-Fonts wird vor allem wegen der Verbreitung von Retina-Bildschirmen immer beliebter. Icons, die über eine Schrift eingebunden sind, können beliebig skaliert werden und bleiben immer scharf, genau wie ganz normale Schriften. Bei Bildern muss man stattdessen ein eigenes Retina-ready Icon-Bild im Theme zur Verfügung stellen.

Icon Fonts sind außerdem noch praktisch, um Farben leicht anpassen zu können. Eine hilfreiche Übersicht mit Beispielen für die Vorteile der Icon Font-Nutzung kannst du dir auf dem CSS-Tricks Blog anschauen. Auf der Beispielseite “Icon Fonts are Awesome” kannst du die verschiedenen Möglichkeiten von Icon Fonts direkt ausprobieren.

Deine Meinung und Tipps

Hast du auch schon mit Icon Fonts gearbeitet? Wie sind deine Erfahrungen und welche Icon Font nutzt du am liebsten? Über dein Feedback und deine weiteren Tipps freue ich mich sehr!

15 Kommentare

  1. Sehr interessant, wann kommt Euer neues Theme? Könntet Ihr schon etwas verraten? LG; Melanie

    • @Melanie: Es dauert noch ein klein wenig, im Moment planen wir den Release fürs nächste Theme Ende Juni / Anfang Juli :) Viele Grüße, Ellen

      • @Ellen Das ist doch absehbar, wenn es in den nächsten 3 Wochen klappt ist es doch super und ich warte gerne noch etwas mit einem Themekauf. Ich freu mich schon und bin schon ganz gespannt darauf. Viele Grüße, Melanie

        • @Melanie: Das würde mich freuen, es wird auch wieder vorab erste Screenshots geben (spätestens Ende Juni) :)

  2. Problematisch finde ich beim Einsatz von Iconfonts und CSS Pseudo-Elementen wie :before und :after nur den Umbruch zwischen Icon/Zeichen und dem nachfolgenden Text. Es gibt leider meines Wissens nach keine Möglichkeit den Umbruch zwischen diesen Elementen zu verhindern.

    Und weil keiner Readme-Dateien liest ;-), noch drei wichtige Hinweise:
    – In der Download-ZIP-Datei ist der Font auch regulär (nicht als Webfont) für den Gebrauch in Photoshop u.ä.

    – Genericons sind in einem 16 Pixel Raster gebaut, d.h. sie sehen besonders scharf aus, wenn 16 Pixel als Größe genutzt wird (oder ein Vielfaches davon). Zwischengrößen wie 24 Pixel gehen auch, aber krumme Werte sollte man vermeiden. (Wird sonst unscharf.)

    – Für Webkit-Browser wird die CSS-Angabe “-webkit-font-smoothing: antialiased” empfohlen.

  3. Ich bevorzuge auch die Font Awesome. Einfach durch die Menge der Icons und auch weil spürbar in kurzen Intervallen neue hinzukommen. Aber dennoch eine liebevoll gestaltete schöne Alternative.

    • @Torsten: Klasse, vielen Dank für den Tipp, es sind ein paar schöne neue Icons dabei finde ich :) Insgesamt bin ich bis jetzt eigentlich ganz gut mit der Auswahl zurecht gekommen, es kommt aber natürlich auf das jeweilige Projekt an, das ist ja klar.

      Und vielen Dank auch noch einmal für die hilfreichen Tipps im Kommentar weiter oben.

      Viele Grüße,
      Ellen

  4. pixeltobi 4. Juli 2013

    …lädt der Browser automatisch nur die Variante, die er braucht? ..die Icons funktionieren zwar, aber irritierend ist, dass im Chrome Inspector folgende Fehlermeldung erscheint:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/06/wp-kb01/wp-content/font/genericons-regular-webfont.woff
    Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/06/wp-kb01/wp-content/font/genericons-regular-webfont.ttf

    d.h. nur das eot. format wurde erfolgreich geladen…

  5. Marcel Epp 9. Oktober 2013

    Der Beitrag ist, wie viele andere hier auf eurer Seite sehr nützlich. Da ich mich aber noch nicht so lange mit Webdesign beschäftige, vermisse ich manchmal eine genauere Beschreibung. Hilfreich wäre in den Erklärungen wenn ihr auf die häufigsten Fehler eingehen könntet. Ich habe gestern die Genericons über CSS eingefügt (Webseite HTML5 & CSS). Leider habe ich nur viereckige Kästchen gesehen und hab lange gebraucht um den Fehler zu finden.

    Im Endeffekt hab ich über all wo eine Pfadangabe war ein Doppelpunkt davor gesetzt. So sieht das jetzt aus:

    src: url(‘../font/genericons-regular-webfont.eot’);

    Ansonsten ist eure Seite einfach nur genial!!! Weiter so!!!

  6. Norbert 21. Mai 2014

    Hallo

    Irgendwie funktioniert das bei mir nicht ?
    http://steinreiniger.at/beispiel-seite/

    Ich habe das Wort unten “Chat” genauso eingebunden wie oben beschrieben

    Den Ordner Font habe ich sowohl in meiner Child als auch im Theme Ordner Twenty Twelve kopiert
    In der Style Css habe ich das mit Font Face wie oben beschrieben eingebunden. Ich habe sogar einmal probiert den Tipp von @Marcel zu befolgen ( src: url(‘../font/genericons-regular-webfont.eot’); )

    Trotzdem funktioniert es nicht …
    Kann mir jemand sagen was ich falsch mache ?

    Danke

  7. Danke für die Anleitung – wird mir sicher bei meinem Erstversuch mit einem (!) Icon-Font sehr helfen.

    Im Ernst, jetzt mal was Sprachliches: wie kommt Ihr bloß auf DIE Font? Es hat immer DER Font geheißen, daran ändert sich doch auch nichts, wenn man ein “Icon-” davorstellt…

    Ansonsten fröhliche Grüße
    von einem überzeugten Fan!

Hinterlasse eine Antwort

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