Dashicons: Native WordPress-Icons im Theme nutzen

Dieser Text wurde am 29. Januar 2015 veröffentlicht und enthält möglicherweise veraltete Informationen.

Die Icons im Administrationsbereich von WordPress entstammen seit Version 3.8 einer eigenen Schriftart, die unter GPL lizenziert ist. Die Dashicons lassen sich nicht nur bei der Pluginentwicklung für das Backend, sondern auch im Frontend einsetzen.

functions.php

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Alternativ kann wp_enqueue_style( 'dashicons' ); in den bereits bestehenden Hook des Themes eingebunden werden.

style.css

Einbinden des WordPress-Logos vor allen Überschriften erster Ebene <h1>.

h1:before {
    content: "\f120";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 1em 'dashicons';
    vertical-align: top;
}