So können sie die WordPress-eigene Icon-Font in ihren Templates und Plugins nutzen.

Seit Version 3.8 benutzt WordPress eine sehr schöne, wenn auch vom Umfang eingeschränkte, Icon-Font in der WordPress-Administrationsoberfläche. Der Font hat “Dashicons” und eignet sich natürlich auch zur Nutzung in eignen Themes und Plugins.

Alles was man dafür tun muss, ist sicher zu stellen, dass der Dashicons-Stylesheet auch im Frontend geladen wird. Das kann man entweder dadurch erreichen, dass man ihn direkt per wp_enqueue_style einbindet oder als Abhängigkeit für den eigenen Stylesheet benutzt.

Folgendes Beispiel zeigt, wie man Dashicons einfach laden kann:

function my_styles()
{
	wp_enqueue_style('dashicons');
}

add_action('wp_enqueue_scripts', 'my_styles');

Im zweiten Beispiel geben wir Dashicons als Abhängigkeit für unser eigenen Script an. WordPress kümmert sich dann darum, dass es automatisch geladen wird:

function my_styles()
{
	wp_enqueue_style('my_style', plugins_url('media.css', __FILE__ ), array('dashicons'));
}

add_action('wp_enqueue_scripts', 'my_styles');

Wenn sie dann bestimmte Icons im Theme nutzen möchte, geht das ganz einfach beispielsweise per :before-Pseudoelement und unter Angabe von Dashicons als Schriftfamilie:

.play:before{

  font-family: "dashicons";
  content: "\f522";

}

Also Ergebnis sollte ein kleines Dreieck vor dem entsprechenden Element zu sehen sein.

Wenn der Artikel hilfreich war, dann abonnieren sich auch meinen YouTube-Channel. Dort gibt es wöchentlich interessante Video-Tutorials zum Thema WordPress.