Standard WordPress-administrasjonspanelet ser ryddig ut, men registrer et par egendefinerte innholdstyper, og menyen blir et virvar av identiske standardikoner. «Innlegg», «Sider», din «Portefølje», «Attester», alle med samme tegnestift-piktogram. Blikket ditt snubler, kunden blir forvirret, og administrasjonsområdet mister finpussen.

Du kan installere en utvidelse for egendefinerte ikoner. Du kan laste inn Font Awesome og dra inn over 2000 ikoner bare for å bruke fem. Eller du kan droppe begge deler, for WordPress har hatt den innebygde Dashicons-ikonfonten siden versjon 3.8. Ingen ekstra avhengigheter, ingen ekstra CSS. Alt ligger allerede på serveren din.

I denne veiledningen går vi gjennom hvordan du bruker Dashicons for egendefinerte innholdstyper, i temaets frontend og via en praktisk shortcode, med fungerende kodeeksempler du kan kopiere og lime inn med en gang.

💡 Hurtigoversikt:

• Registrer en egendefinert innholdstype, sett menu_icon-argumentet til en Dashicon CSS-klasse, så dukker ikonet opp i administrasjonen uten en eneste utvidelse.
• Kø opp wp_enqueue_style('dashicons') i frontend og sett inn ikoner via en HTML <span>-tagg hvor som helst i temaet ditt.
• Opprett en shortcode [dashicon icon="..."] så kan kunden legge til ikoner i innhold uten å røre kode.

Hva Dashicons er og hvorfor du trenger dem

Dashicons er den offisielle ikonfonten for WordPress-administrasjonspanelet. Den kom i versjon 3.8 sammen med en større redesign av administrasjonen og har vært brukt til hvert eneste venstremenyelement siden: «Innlegg», «Media», «Utvidelser», «Innstillinger», alt sammen Dashicons.

Fonten inneholder rundt 300 ikoner som dekker nesten ethvert behov: innholdstyper, media, sosiale nettverk, editoren, varsler, taksonomier, widgeter. En fullstendig søkbar katalog finnes på Dashicons-siden i WordPress Developer Resources.

Den største fordelen sammenlignet med noe som Font Awesome er null kostnad ved inkludering. Dashicons er allerede lastet inn i administrasjonen, og for frontend legger du det til med én enkelt linje i functions.php. Du drar ikke inn et bibliotek med over 2000 ikoner på nettstedet ditt når 90% aldri vil bli brukt. Skulle du trenge et tilpasset sett, sjekk ut Fontello, der du kan bygge et stilsett kun fra glyfene du velger.

En viktig merknad: Dashicons-prosjektet sluttet å ta imot forespørsler om nye ikoner i juni 2023. Det eksisterende settet er fryst, men for typiske WordPress-oppgaver dekker det fortsatt behovene dine med god margin.

Metode 1: Ikon for en egendefinert innholdstype

Det vanligste scenarioet er å registrere en ny innholdstype via register_post_type og ønske et meningsfylt ikon ved siden av navnet i administrasjonen i stedet for standard «tegnestiften».

Dette gjør du med menu_icon-argumentet:

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 );

Verdien for menu_icon er ikonets CSS-klasse. Gå til Dashicons-siden, klikk på ikonet du vil ha, og kopier klassen fra verktøytipset. Bare oppgi dashicons-{slug}, så vil WordPress gjengi ikonet i venstremenyen automatisk.

Før Dashicons måtte du oppgi en direkte bilde-URL for menu_icon. På et nettsted med et dusin utvidelser ville ikoner sprike i stil og administrasjonsområdet så sjuskete ut. Nå arver alle innholdstypeikoner WordPress sitt enhetlige grensesnittuttrykk, ryddig og uanstrengt.

Samme fremgangsmåte fungerer for sider lagt til via add_menu_page:

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
);

Send Dashicon-klassen som den femte parameteren etter callback-funksjonen, så får det nye menyelementet et ikon fra samme familie som alle standardikonene.

Metode 2: Dashicons i temaets frontend

Ikoner er nyttige også utenfor admin. Metadata for innlegg (dato, kategori, forfatter), en søkeknapp i headeren, et handlekurvikon: dette er typiske steder der et ikon gjør grensesnittet tydeligere.

For å aktivere Dashicons på den offentlige siden av nettstedet legger du til i functions.php:

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
} );

Nå kan du sette inn et ikon via HTML i en hvilken som helst temamal:

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

Bytt ut calendar med sluggen for ikonet du trenger, så vises det. Denne HTML-en fungerer overalt i temaet: header.php, footer.php, single.php, til og med direkte i «Navigasjonsetikett»-feltet på et menyelement (WordPress tillater HTML i navigasjonsetiketter).

For å gruppere et ikon med tekst bruker du hjelpeklassen dashicons-before; den legger ikonet foran elementets innhold uten ekstra markup:

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

Metode 3: Shortcode for å sette inn ikoner i innhold

Hvis du bygger et nettsted for en kunde som ikke jobber med HTML, gi dem en shortcode. Du legger koden i functions.php én gang, og kunden setter inn et ikon i et hvilket som helst innlegg via [dashicon icon="..."].

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
} );

Bruk i editoren:

1
[dashicon icon="chart-pie"]

Shortcoden forutsetter at du allerede har lastet inn Dashicons-stilarket i frontend (Metode 2). Hvis du ikke har gjort det, vil ikke ikonet vises. Alternativt kan du legge wp_enqueue_style direkte inn i shortcode-kroppen slik at stilarket bare lastes når et ikon faktisk brukes. Men denne tilnærmingen har en ulempe: stilarket lastes i bunnteksten på siden, noe som får ikonene til å «blinke» etter rendering. Global inkludering er mer pålitelig.

Bonus: Dashicons i Gutenberg-blokker

Hvis du utvikler egendefinerte blokker, fungerer Dashicons der også. Når du registrerer en blokk via registerBlockType, setter du icon-parameteren til et Dashicon-navn:

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
} );

For React-komponenter i admin er en ferdiglaget Dashicon-komponent tilgjengelig fra @wordpress/components-pakken:

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
);

Dette fungerer bare i admin (blokk-editor, innstillingssider). I frontend henter ikke Dashicon-komponenten inn stiler; du trenger fortsatt wp_enqueue_style('dashicons') der.

⁉️🤔 Ofte stilte spørsmål

Må jeg installere en plugin for å bruke Dashicons?

Nei. Dashicons har vært innebygd i WordPress-kjernen siden versjon 3.8. I admin lastes det som standard. For frontend er én enkelt linje (wp_enqueue_style('dashicons')) i functions.php nok.

Hvorfor er Dashicons bedre enn Font Awesome?

Størrelse og null ekstern avhengighet. Font Awesome inneholder over 2000 ikoner, de fleste vil du aldri trenge. Dashicons har omtrent 300, alle skreddersydd for WordPress, og stilarket ligger allerede på serveren din. Hvis ikonet finnes i Dashicons-katalogen, bruk det og unngå oppblåsthet.

Hvilke ikoner er tilgjengelige i Dashicons?

Rundt 300: innleggstyper, media, sosiale nettverk, editor, varsler, taksonomier, widgeter og WordPress-spesifikke glyfer (Produkter, Buddicons). En fullstendig søkbar liste finnes på developer.wordpress.org/resource/dashicons.

Kan jeg legge til mitt eget ikon i Dashicons?

Nei. Siden juni 2023 aksepterer prosjektet ikke lenger forespørsler om nye ikoner. Hvis glyfen du trenger ikke finnes i katalogen, bruk Font Awesome, Fontello eller last opp en egendefinert SVG.

Hvorfor vises ikke ikonene i frontend?

Mest sannsynlig har du glemt å kalle wp_enqueue_style('dashicons'). Sjekk functions.php: kallet bør være hooket til wp_enqueue_scripts. En annen mulig årsak er at et tema eller en plugin fjerner Dashicons via wp_dequeue_style.

Er det verdt å bruke Dashicons i 2026

Kort svar: ja, for admin og enkle frontend-behov. Dashicons betyr null overhead, forutsigbar rendering og full integrasjon med WordPress-grensesnittet. For egendefinerte innleggstyper og admin-menyelementer forblir det de facto-standarden.

Forstå begrensningene på forhånd: ikonsettet er fryst og ingen nye ikoner vil bli lagt til. Hvis du bygger et nettsted med rik visuell design, vil Font Awesome eller en egendefinert SVG-sprite gi deg mer fleksibilitet. Men for de fleste typiske WordPress-oppgaver er den innebygde fonten mer enn nok, og å dra inn et bibliotek med over 2000 glyfer for tre ikoner gir ingen mening.

Den raskeste måten å legge til et ikon for en egendefinert innleggstype er å kopiere klassen fra Dashicons-katalogen og slippe den inn i menu_icon. Det tar 30 sekunder og krever ingen plugins.

Hvis dette stoffet var nyttig, se videoopplæringen om bruk av Dashicons i navigasjonsmenyer: den er på engelsk, men hvert trinn vises på skjermen slik at du kan følge med uten oversettelse.