Das Standard-WordPress-Adminpanel wirkt aufgeräumt, aber registrieren Sie ein paar benutzerdefinierte Beitragstypen, und das Menü verwandelt sich in ein Durcheinander identischer Standardsymbole. „Beiträge", „Seiten", Ihr „Portfolio", „Referenzen", alle mit demselben Reißzwecken-Piktogramm. Das Auge stolpert, der Kunde ist verwirrt und der Adminbereich verliert seinen Schliff.

Sie könnten ein Plugin für benutzerdefinierte Symbole installieren. Sie könnten Font Awesome laden und über 2.000 Symbole einbinden, nur um fünf zu nutzen. Oder Sie verzichten auf beides, denn WordPress liefert seit Version 3.8 die integrierte Dashicons-Icon-Schriftart mit. Keine zusätzlichen Abhängigkeiten, kein zusätzliches CSS. Alles befindet sich bereits auf Ihrem Server.

In dieser Anleitung zeigen wir Ihnen, wie Sie Dashicons für benutzerdefinierte Beitragstypen, im Frontend Ihres Themes und per praktischem Shortcode einsetzen, mit funktionierenden Codebeispielen, die Sie direkt kopieren und einfügen können.

💡 Kurzüberblick:

• Registrieren Sie einen benutzerdefinierten Beitragstyp, setzen Sie das Argument menu_icon auf eine Dashicon-CSS-Klasse, und das Symbol erscheint im Adminbereich, ganz ohne Plugin.
• Binden Sie wp_enqueue_style('dashicons') im Frontend ein und fügen Sie Symbole über ein HTML-<span>-Tag an beliebiger Stelle in Ihrem Theme ein.
• Erstellen Sie einen Shortcode [dashicon icon="..."], und der Kunde fügt Symbole in Inhalte ein, ohne Code anfassen zu müssen.

Was Dashicons sind und warum Sie sie brauchen

Dashicons ist die offizielle Icon-Schriftart für das WordPress-Adminpanel. Sie kam mit Version 3.8 im Zuge einer umfassenden Admin-Neugestaltung und wird seither für jeden Eintrag im linken Menü verwendet: „Beiträge", „Medien", „Plugins", „Einstellungen", alles Dashicons.

Die Schriftart enthält rund 300 Symbole, die nahezu jeden Bedarf abdecken: Beitragstypen, Medien, soziale Netzwerke, der Editor, Benachrichtigungen, Taxonomien, Widgets. Ein vollständiger, durchsuchbarer Katalog ist auf der Dashicons-Seite in den WordPress Developer Resources verfügbar.

Der Hauptvorteil gegenüber etwas wie Font Awesome sind die kostenlose Einbindung ohne Mehraufwand. Dashicons ist im Adminbereich bereits geladen, und für das Frontend fügen Sie es mit einer einzigen Zeile in functions.php hinzu. Sie schleppen keine Bibliothek mit über 2.000 Symbolen auf Ihre Website, wenn 90% davon nie genutzt werden. Falls Sie doch einen benutzerdefinierten Satz benötigen, sehen Sie sich Fontello an, wo Sie ein Stylesheet nur aus den von Ihnen gewählten Glyphen erstellen können.

Ein wichtiger Hinweis: Das Dashicons-Projekt hat im Juni 2023 die Annahme von Anfragen für neue Symbole eingestellt. Der bestehende Satz ist eingefroren, aber für typische WordPress-Aufgaben deckt er Ihren Bedarf weiterhin mit reichlich Spielraum ab.

Methode 1: Symbol für einen benutzerdefinierten Beitragstyp

Das häufigste Szenario ist die Registrierung eines neuen Beitragstyps über register_post_type und der Wunsch nach einem aussagekräftigen Symbol neben dessen Namen im Adminbereich anstelle der standardmäßigen „Reißzwecke".

Dies erreichen Sie mit dem Argument menu_icon:

1
/**
2
 * Registers a custom post type "Portfolio" with a Dashicons icon.
3
 * Code goes into the theme's or child theme's functions.php.
4
 */
5
function sd_register_portfolio_post_type() {
6
    register_post_type( 'portfolio', array(
7
        'public'      => true,
8
        'label'       => __( 'Portfolio', 'textdomain' ),
9
        'menu_icon'   => 'dashicons-portfolio',
10
        'has_archive' => true,
11
        'supports'    => array( 'title', 'editor', 'thumbnail' ),
12
    ) );
13
}
14
add_action( 'init', 'sd_register_portfolio_post_type', 0 );

Der Wert von menu_icon ist die CSS-Klasse des Symbols. Gehen Sie auf die Dashicons-Seite, klicken Sie auf das gewünschte Symbol und kopieren Sie dessen Klasse aus dem Tooltip. Geben Sie einfach dashicons-{slug} an, und WordPress rendert das Symbol automatisch im linken Menü.

Vor Dashicons mussten Sie eine direkte Bild-URL für menu_icon angeben. Auf einer Website mit einem Dutzend Plugins sprangen die Symbole stilistisch hin und her, und der Adminbereich wirkte unsauber. Jetzt erben alle Beitragstyp-Symbole den einheitlichen Interface-Stil von WordPress, ordentlich und mühelos.

Derselbe Ansatz funktioniert für Seiten, die über add_menu_page hinzugefügt werden:

1
add_menu_page(
2
    __( 'My Reports', 'textdomain' ),
3
    __( 'Reports', 'textdomain' ),
4
    'manage_options',
5
    'my-reports',
6
    'sd_render_reports_page',
7
    'dashicons-chart-area',
8
    25
9
);

Übergeben Sie die Dashicon-Klasse als fünften Parameter nach der Callback-Funktion, und der neue Menüeintrag erhält ein Icon aus derselben Familie wie alle Standard-Icons.

Methode 2: Dashicons im Frontend Ihres Themes

Icons sind nicht nur im Admin-Bereich nützlich. Beitrags-Metadaten (Datum, Kategorie, Autor), ein Such-Button im Header, ein Warenkorb-Icon: Das sind typische Stellen, an denen ein Icon die Benutzeroberfläche klarer macht.

Um Dashicons auf der öffentlichen Seite der Website zu aktivieren, fügen Sie in functions.php Folgendes hinzu:

1
/**
2
 * Enqueues the Dashicons stylesheet on the frontend.
3
 * Code goes into the child theme's functions.php.
4
 */
5
add_action( 'wp_enqueue_scripts', function() {
6
    wp_enqueue_style( 'dashicons' );
7
} );

Nun können Sie ein Icon per HTML in jeder Theme-Vorlage einfügen:

1
<span class="dashicons dashicons-calendar"></span>

Ersetzen Sie calendar durch den Slug des gewünschten Icons, und es wird angezeigt. Dieses HTML funktioniert überall im Theme: header.php, footer.php, single.php, sogar direkt im Feld „Navigationsbezeichnung" eines Menüeintrags (WordPress erlaubt HTML in Navigationsbezeichnungen).

Um ein Icon mit Text zu gruppieren, verwenden Sie die Hilfsklasse dashicons-before; sie fügt das Icon ohne zusätzliches Markup vor dem Inhalt des Elements ein:

1
<h2 class="dashicons-before dashicons-smiley">Welcome Heading</h2>

Methode 3: Shortcode zum Einfügen von Icons in Inhalte

Wenn Sie eine Website für einen Kunden erstellen, der nicht mit HTML arbeitet, geben Sie ihm einen Shortcode an die Hand. Sie fügen den Code einmal in functions.php ein, und der Kunde kann in jedem Beitrag ein Icon per [dashicon icon="..."] einfügen.

1
/**
2
 * Registers the shortcode [dashicon icon="..."] to insert Dashicons into content.
3
 * Requires prior enqueuing of dashicons via wp_enqueue_style (Method 2).
4
 * Code goes into the theme's functions.php or a separate included file.
5
 */
6
add_shortcode( 'dashicon', function( $atts ) {
7
    $atts = shortcode_atts( array(
8
        'icon' => 'menu',
9
    ), $atts, 'dashicon' );
10
 
11
    if ( ! empty( $atts['icon'] ) ) {
12
        return sprintf(
13
            '<span class="dashicons dashicons-%s"></span>',
14
            esc_attr( $atts['icon'] )
15
        );
16
    }
17
 
18
    return '';
19
} );

Verwendung im Editor:

1
[dashicon icon="chart-pie"]

Der Shortcode setzt voraus, dass Sie den Dashicons-Stylesheet bereits im Frontend eingebunden haben (Methode 2). Falls nicht, wird das Icon nicht angezeigt. Alternativ können Sie wp_enqueue_style direkt im Shortcode-Body einbetten, sodass der Stylesheet nur geladen wird, wenn tatsächlich ein Icon verwendet wird. Dieser Ansatz hat jedoch einen Haken: Der Stylesheet wird im Seiten-Footer geladen, was dazu führt, dass die Icons nach dem Rendern kurz „aufblitzen". Die globale Einbindung ist zuverlässiger.

Bonus: Dashicons in Gutenberg-Blöcken

Wenn Sie eigene Blöcke entwickeln, funktionieren Dashicons auch dort. Beim Registrieren eines Blocks via registerBlockType setzen Sie den Parameter icon auf einen Dashicon-Namen:

1
registerBlockType( 'my-plugin/my-block', {
2
    apiVersion: 2,
3
    title:    'My Block',
4
    icon:     'dashicons-admin-site',
5
    category: 'design',
6
    edit()   {},
7
    save()   {},
8
} );

Für React-Komponenten im Admin-Bereich steht eine fertige Dashicon-Komponente aus dem Paket @wordpress/components zur Verfügung:

1
import { Dashicon } from '@wordpress/components';
2
 
3
const MyComponent = () => (
4
    <div>
5
        <Dashicon icon="admin-home" />
6
        <Dashicon icon="products" />
7
        <Dashicon icon="wordpress" />
8
    </div>
9
);

Dies funktioniert nur im Admin-Bereich (Block-Editor, Einstellungsseiten). Im Frontend zieht die Dashicon-Komponente keine Styles nach; Sie benötigen dort weiterhin wp_enqueue_style('dashicons').

⁉️🤔 Häufig gestellte Fragen

Muss ich ein Plugin installieren, um Dashicons zu nutzen?

Nein. Dashicons ist seit Version 3.8 fester Bestandteil des WordPress-Core. Im Admin-Bereich wird es standardmäßig geladen. Für das Frontend genügt eine einzige Zeile (wp_enqueue_style('dashicons')) in der functions.php.

Warum sind Dashicons besser als Font Awesome?

Geringere Größe und keine externe Abhängigkeit. Font Awesome enthält über 2.000 Icons, von denen Sie die meisten nie benötigen werden. Dashicons umfasst rund 300, die alle auf WordPress zugeschnitten sind, und der Stylesheet liegt bereits auf Ihrem Server. Wenn das Icon im Dashicons-Katalog existiert, nutzen Sie es und vermeiden Sie den Ballast.

Welche Icons sind in Dashicons verfügbar?

Rund 300: Beitragstypen, Medien, soziale Netzwerke, Editor, Benachrichtigungen, Taxonomien, Widgets und WordPress-spezifische Glyphen (Products, Buddicons). Eine vollständige, durchsuchbare Liste finden Sie unter developer.wordpress.org/resource/dashicons.

Kann ich eigene Icons zu Dashicons hinzufügen?

Nein. Seit Juni 2023 nimmt das Projekt keine Anfragen für neue Icons mehr an. Wenn die benötigte Glyphe nicht im Katalog ist, verwenden Sie Font Awesome, Fontello oder laden Sie ein eigenes SVG hoch.

Warum werden die Icons im Frontend nicht angezeigt?

Höchstwahrscheinlich haben Sie vergessen, wp_enqueue_style('dashicons') aufzurufen. Prüfen Sie Ihre functions.php: Der Aufruf sollte an wp_enqueue_scripts gehängt sein. Eine weitere mögliche Ursache ist, dass ein Theme oder Plugin Dashicons per wp_dequeue_style entfernt.

Lohnt sich der Einsatz von Dashicons im Jahr 2026

Kurze Antwort: Ja, für den Admin-Bereich und einfache Frontend-Anforderungen. Dashicons bedeutet null Overhead, vorhersehbare Darstellung und vollständige Integration in die WordPress-Oberfläche. Für benutzerdefinierte Beitragstypen und Admin-Menüeinträge bleibt es der De-facto-Standard.

Machen Sie sich die Grenzen von vornherein klar: Der Icon-Satz ist eingefroren, es werden keine neuen Icons hinzugefügt. Wenn Sie eine Website mit anspruchsvollem visuellem Design erstellen, bieten Font Awesome oder ein eigener SVG-Sprite mehr Flexibilität. Für die meisten typischen WordPress-Aufgaben ist die eingebaute Schriftart jedoch mehr als ausreichend, und eine Bibliothek mit über 2.000 Glyphen für drei Icons einzubinden, ergibt keinen Sinn.

Der schnellste Weg, ein Icon für einen benutzerdefinierten Beitragstyp hinzuzufügen, besteht darin, die Klasse aus dem Dashicons-Katalog zu kopieren und in menu_icon einzufügen. Das dauert 30 Sekunden und erfordert keine Plugins.

Falls dieses Material hilfreich war, sehen Sie sich das Video-Tutorial zur Verwendung von Dashicons in Navigationsmenüs an: Es ist auf Englisch, aber jeder Schritt wird am Bildschirm gezeigt, sodass Sie auch ohne Übersetzung folgen können.