Frisch notiert!

Die neusten Artikel aus unserem Blog.

WordPress Tipp: WP 3.8 Dashicons im Frontend nutzen

Zuletzt aktualisiert am 18/08/2016 von Adrian Lambertz
2 Kommentare
Webdesign, Wordpress
/ Webdesign / Wordpress / 2

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.

Adrian Lambertz

Seit 2010 bin ich nun schon bei Pixelbar mit dabei. Zuerst als Auszubildender und nach erfolgreichem Abschluss meiner Ausbildung als Frontend-Entwickler. Ohne Musik und Kaffee kann ich nicht leben, daher konsumiere ich beides während der Arbeit praktisch durchgehend :). Daneben liebe ich WordPress - darauf habe ich mich spezialisiert.

Weitere Beiträge von adrian anzeigen

2 Kommentare

Kommentar hinterlassen

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