Standardpanelen i WordPress admin ser prydlig ut, men registrera ett par anpassade innehållstyper så förvandlas menyn till en röra av identiska standardikoner. "Inlägg", "Sidor", din "Portfölj", "Referenser", alla med samma häftstifts-piktogram. Ögat snubblar, kunden blir förvirrad och adminytan tappar sin finish.

Du kan installera ett tillägg för anpassade ikoner. Du kan ladda Font Awesome och dra in 2 000+ ikoner bara för att använda fem. Eller så kan du hoppa över båda, eftersom WordPress har levererats med det inbyggda ikonfonten Dashicons sedan version 3.8. Inga extra beroenden, ingen ytterligare CSS. Allt finns redan på din server.

I den här guiden går vi igenom hur du använder Dashicons för anpassade innehållstyper, i ditt temas frontend och via en praktisk shortcode, med fungerande kodexempel som du kan kopiera och klistra in direkt.

💡 Snabb översikt:

• Registrera en anpassad innehållstyp, sätt argumentet menu_icon till en Dashicon CSS-klass, så visas ikonen i admin utan ett enda tillägg.
• Köa wp_enqueue_style('dashicons') i frontenden och infoga ikoner via en HTML <span>-tagg var som helst i ditt tema.
• Skapa en shortcode [dashicon icon="..."] så kan kunden lägga till ikoner i innehåll utan att röra kod.

Vad Dashicons är och varför du behöver dem

Dashicons är det officiella ikonfonten för WordPress adminpanel. Det kom i version 3.8 i samband med en större admin-omdesign och har använts för varje vänstermeny-alternativ sedan dess: "Inlägg", "Media", "Tillägg", "Inställningar", alla Dashicons.

Fonten innehåller ungefär 300 ikoner som täcker nästan alla behov: innehållstyper, media, sociala nätverk, redigeraren, aviseringar, taxonomier, widgetar. En fullständig sökbar katalog finns på Dashicons-sidan i WordPress Developer Resources.

Den främsta fördelen jämfört med något som Font Awesome är noll kostnad att inkludera. Dashicons är redan inläst i admin, och för frontenden lägger du till det med en enda rad i functions.php. Du drar inte in ett bibliotek med 2 000+ ikoner på din sajt när 90% aldrig kommer att användas. Om du verkligen behöver en anpassad uppsättning, kolla in Fontello, där du kan bygga en stilmall från enbart de glyfer du väljer.

En viktig notering: Dashicons-projektet slutade ta emot förfrågningar om nya ikoner i juni 2023. Den befintliga uppsättningen är fryst, men för typiska WordPress-uppgifter täcker den fortfarande dina behov med marginal.

Metod 1: Ikon för en anpassad innehållstyp

Det vanligaste scenariot är att registrera en ny innehållstyp via register_post_type och vilja ha en meningsfull ikon bredvid dess namn i admin istället för standard-häftstiftet.

Du gör detta med argumentet 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 );

Värdet för menu_icon är ikonens CSS-klass. Gå till Dashicons-sidan, klicka på ikonen du vill ha och kopiera dess klass från tooltipen. Ange bara dashicons-{slug}, så renderar WordPress ikonen i vänstermenyn automatiskt.

Innan Dashicons var du tvungen att ange en direkt bild-URL för menu_icon. På en sajt med ett dussin tillägg hoppade ikonerna runt i stil och adminytan såg slarvig ut. Nu ärver alla innehållstyp-ikoner WordPress enhetliga gränssnittsstil, prydligt och utan ansträngning.

Samma tillvägagångssätt fungerar för sidor som läggs till 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
);

Skicka med Dashicon-klassen som den femte parametern efter callback-funktionen, så får det nya menyvalet en ikon från samma familj som alla standardikoner.

Metod 2: Dashicons i temats frontend

Ikoner är användbara även utanför adminpanelen. Inläggsmetadata (datum, kategori, författare), en sökknapp i sidhuvudet, en varukorgsikon: det är typiska ställen där en ikon gör gränssnittet tydligare.

För att aktivera Dashicons på den publika delen av webbplatsen lägger du till följande 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
} );

Nu kan du infoga en ikon via HTML i valfri temamall:

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

Byt ut calendar mot sluggen för den ikon du behöver, så visas den. Denna HTML fungerar var som helst i temat: header.php, footer.php, single.php, till och med direkt i fältet "Navigationsetikett" för ett menyval (WordPress tillåter HTML i navigationsetiketter).

För att gruppera en ikon med text använder du hjälpklassen dashicons-before; den lägger till ikonen före elementets innehåll utan extra markup:

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

Metod 3: Shortcode för att infoga ikoner i innehåll

Om du bygger en webbplats åt en kund som inte arbetar med HTML, ge dem en shortcode. Du lägger till koden i functions.php en gång, och kunden infogar en ikon i vilket inlägg som helst 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
} );

Användning i editorn:

1
[dashicon icon="chart-pie"]

Shortcoden förutsätter att du redan har köat Dashicons-stilmallen i frontenden (Metod 2). Om du inte har gjort det kommer ikonen inte att visas. Alternativt kan du bädda in wp_enqueue_style direkt i shortcode-kroppen så att stilmallen bara laddas när en ikon faktiskt används. Men den metoden har en hake: stilmallen laddas i sidfoten, vilket gör att ikonerna "flimrar till" efter rendering. Global inkludering är mer tillförlitligt.

Bonus: Dashicons i Gutenberg-block

Om du utvecklar anpassade block fungerar Dashicons även där. När du registrerar ett block via registerBlockType anger du parametern icon till ett Dashicon-namn:

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-komponenter i adminpanelen finns en färdig Dashicon-komponent tillgänglig från paketet @wordpress/components:

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

Detta fungerar endast i adminpanelen (blockredigeraren, inställningssidor). I frontenden drar Dashicon-komponenten inte in stilmallar; du behöver fortfarande wp_enqueue_style('dashicons') där.

⁉️🤔 Vanliga frågor

Behöver jag installera ett tillägg för att använda Dashicons?

Nej. Dashicons har varit inbyggt i WordPress core sedan version 3.8. I adminpanelen laddas det som standard. För frontenden räcker det med en enda rad (wp_enqueue_style('dashicons')) i functions.php.

Varför är Dashicons bättre än Font Awesome?

Storlek och inget externt beroende. Font Awesome innehåller över 2 000 ikoner, varav de flesta du aldrig kommer att behöva. Dashicons har ungefär 300, alla skräddarsydda för WordPress, och stilmallen finns redan på din server. Om ikonen finns i Dashicons-katalogen, använd den och undvik onödig bloat.

Vilka ikoner finns tillgängliga i Dashicons?

Cirka 300: inläggstyper, media, sociala nätverk, redigerare, notiser, taxonomier, widgets och WordPress-specifika symboler (Produkter, Buddicons). En fullständig sökbar lista finns på developer.wordpress.org/resource/dashicons.

Kan jag lägga till min egen ikon i Dashicons?

Nej. Sedan juni 2023 tar projektet inte längre emot förfrågningar om nya ikoner. Om symbolen du behöver inte finns i katalogen, använd Font Awesome, Fontello eller ladda upp en anpassad SVG.

Varför visas inte ikonerna i frontenden?

Troligtvis har du glömt att anropa wp_enqueue_style('dashicons'). Kontrollera din functions.php: anropet ska vara kopplat till wp_enqueue_scripts. En annan möjlig orsak är att ett tema eller tillägg tar bort Dashicons via wp_dequeue_style.

Är det värt att använda Dashicons 2026

Kort svar: ja, för adminpanelen och enkla frontendbehov. Dashicons innebär noll overhead, förutsägbar rendering och full integration med WordPress-gränssnittet. För anpassade inläggstyper och adminmenyval är det fortfarande de facto-standarden.

Förstå begränsningarna från början: ikonuppsättningen är fryst och inga nya ikoner kommer att läggas till. Om du bygger en webbplats med rik visuell design ger Font Awesome eller en anpassad SVG-sprite dig mer flexibilitet. Men för de flesta typiska WordPress-uppgifter är det inbyggda typsnittet mer än tillräckligt, och att dra in ett bibliotek med över 2 000 symboler för tre ikoner är inte meningsfullt.

Det snabbaste sättet att lägga till en ikon för en anpassad inläggstyp är att kopiera klassen från Dashicons-katalogen och släppa in den i menu_icon. Det tar 30 sekunder och kräver inga tillägg.

Om detta material var till hjälp, titta på videohandledningen om att använda Dashicons i navigeringsmenyer: den är på engelska, men varje steg visas på skärmen så att du kan följa med utan översättning.