WordPress Tipp: WP 3.8 Dashicons im Frontend nutzen
Seit der Auffrischung des WordPress-Backends in WP3.8 wird für die benötigten Icons eine Iconfont genutzt. Und zwar die „Dashicons“ Iconfont. Sie umfasst ca. 197 Icons und kann im WordPress Backend bei der Entwicklung von Plugins und Custom-Post-Types benutzt werden. Mit einem einfachen „Trick“ lässt sich die Iconfont auch im Frontend nutzen
Vorbereitung
function include_dashicons_font(){
//Lade Dashicons font
wp_enqueue_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'include_dashicons_font', 100 );
Fügt einfach das obige Snippet in eure functions.php des Themes ein und voilà.
Die CSS Datei ist im Frontend registriert.
Benutzung
Um die Icons einzufügen benötigt ihr nur noch verschiedene Klassenbezeichnungen auf den Elementen:
<span class="dashicons dashicons-tickets"></span>
Gibt z.B. dieses Icon aus:
Die Klasse „dashicons“ legt die font-family fest und die Klasse „dahsicons-tickets“ generiert das Icon über die content: „“; Anweisung.
Welche Icons kann ich nutzen?
Eine Referenz, welche Icons es alles gibt und welche Klassen Ihr nutzen müsst, findet ihr hier!
Zusammenfassend
Der Vorteil: man spart sich sehr viel Zeit mit der Erstellung, Hochladen und Einbinden einer Custom-Font über Dienste wie icomoon.io. Man hat direkt die passende Iconfont parat.
Der Nachteil: man könnte die Tendenz haben in ein Muster zu verfallen, denn aufgrund der Einfachheit neigt man dazu, immer wieder die Dashicons Font zu benutzen. Das wirkt sich letztendlich auf das Gesamtlayout aus. Gerade auch bei den Iconfonts gibt es doch viele feine Unterschiede.
Alles in Allem überwiegen allerdings meiner Meinung nach ganz klar die Vorteile. Das liegt hauptsächlich an der Fülle der verschiedene Icons und an dem typischen Gebrauch von Iconsfonts: ich benötige meist die Pfeile für Pager, Häkchen oder Kreuzchen für Meldungen und Facebook oder Twitter für Sharing-Optionen.
Generell erfüllt diese Iconfont niemals alle Wünsche: sobald es spezifischer geht, kommt man nicht um eine eigens kreierte Iconfont herum.
Super Tipp, genau das, was ich gesucht habe.
Allerdings ist der Referenzlink auf die Übersicht der verfügbaren Icons tot….
Hier der Link auf WordPress:
https://developer.wordpress.org/resource/dashicons/#welcome-comments