O painel de administração padrão do WordPress parece organizado, mas registe alguns tipos de conteúdo personalizados e o menu transforma-se numa confusão de ícones padrão idênticos. «Artigos», «Páginas», o seu «Portefólio», «Testemunhos», todos com o mesmo pictograma de alfinete. O olhar tropeça, o cliente fica confuso e a área de administração perde o polimento.

Poderia instalar um plugin para ícones personalizados. Poderia carregar o Font Awesome e incluir mais de 2000 ícones só para usar cinco. Ou poderia evitar ambos, porque o WordPress inclui a fonte de ícones Dashicons integrada desde a versão 3.8. Sem dependências extra, sem CSS adicional. Já está tudo no seu servidor.

Neste guia, vamos ver como usar os Dashicons para tipos de conteúdo personalizados, no frontend do seu tema e através de um shortcode prático, com exemplos de código funcionais que pode copiar e colar agora mesmo.

💡 Visão geral rápida:

• Registe um tipo de conteúdo personalizado, defina o argumento menu_icon para uma classe CSS Dashicon e o ícone aparece na administração sem um único plugin.
• Carregue wp_enqueue_style('dashicons') no frontend e insira ícones através de uma tag HTML <span> em qualquer parte do seu tema.
• Crie um shortcode [dashicon icon="..."] e o cliente adiciona ícones ao conteúdo sem mexer em código.

O que são os Dashicons e porque precisa deles

Os Dashicons são a fonte de ícones oficial do painel de administração do WordPress. Chegou na versão 3.8, a par de um grande redesenho da administração, e tem sido usada em todos os itens do menu esquerdo desde então: «Artigos», «Multimédia», «Plugins», «Configurações», tudo Dashicons.

A fonte contém cerca de 300 ícones que cobrem quase todas as necessidades: tipos de conteúdo, multimédia, redes sociais, o editor, notificações, taxonomias, widgets. Um catálogo completo e pesquisável está disponível na página dos Dashicons nos Recursos para Programadores do WordPress.

A principal vantagem em relação a algo como o Font Awesome é o custo zero de inclusão. Os Dashicons já estão carregados na administração e, para o frontend, adiciona-os com uma única linha no functions.php. Não está a arrastar uma biblioteca de mais de 2000 ícones para o seu site quando 90% nunca serão usados. Se precisar mesmo de um conjunto personalizado, veja o Fontello, onde pode construir uma folha de estilos apenas com os glifos que escolher.

Uma nota importante: o projeto Dashicons deixou de aceitar pedidos de novos ícones em junho de 2023. O conjunto existente está congelado, mas para as tarefas típicas do WordPress continua a cobrir as suas necessidades com folga.

Método 1: Ícone para um tipo de conteúdo personalizado

O cenário mais comum é registar um novo tipo de conteúdo através de register_post_type e querer um ícone com significado ao lado do seu nome na administração, em vez do padrão «alfinete».

Faz isto com o argumento 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 );

O valor de menu_icon é a classe CSS do ícone. Vá à página dos Dashicons, clique no ícone que pretende e copie a sua classe da dica de contexto. Basta fornecer dashicons-{slug} e o WordPress irá renderizar o ícone no menu esquerdo automaticamente.

Antes dos Dashicons, tinha de especificar um URL de imagem direto para menu_icon. Num site com uma dúzia de plugins, os ícones variavam em estilo e a área de administração parecia desleixada. Agora, todos os ícones de tipos de conteúdo herdam o estilo de interface unificado do WordPress, limpo e sem esforço.

A mesma abordagem funciona para páginas adicionadas através de 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
);

Passe a classe Dashicon como quinto parâmetro, após a função de callback, e o novo item de menu recebe um ícone da mesma família de todos os ícones padrão.

Método 2: Dashicons no frontend do seu tema

Os ícones são úteis para além da área de administração. Metadados de artigos (data, categoria, autor), um botão de pesquisa no cabeçalho, um ícone de carrinho: estes são locais típicos onde um ícone torna a interface mais clara.

Para ativar os Dashicons no lado público do site, adicione ao 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
} );

Agora pode inserir um ícone via HTML em qualquer template do tema:

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

Substitua calendar pelo slug do ícone de que precisa e ele será exibido. Este HTML funciona em qualquer parte do tema: header.php, footer.php, single.php e até diretamente no campo «Navigation Label» de um item de menu (o WordPress permite HTML nos rótulos de navegação).

Para agrupar um ícone com texto, use a classe auxiliar dashicons-before; ela adiciona o ícone antes do conteúdo do elemento sem marcação extra:

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

Método 3: Shortcode para inserir ícones no conteúdo

Se está a construir um site para um cliente que não trabalha com HTML, forneça-lhe um shortcode. Adiciona o código ao functions.php uma vez e o cliente insere um ícone em qualquer artigo através de [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
} );

Utilização no editor:

1
[dashicon icon="chart-pie"]

O shortcode pressupõe que já carregou o estilo Dashicons no frontend (Método 2). Se não o fez, o ícone não será exibido. Em alternativa, pode incorporar wp_enqueue_style diretamente no corpo do shortcode para que o estilo seja carregado apenas quando um ícone é realmente utilizado. Mas esta abordagem tem uma limitação: a folha de estilos é carregada no rodapé da página, o que faz com que os ícones «pisquem» após a renderização. O carregamento global é mais fiável.

Bónus: Dashicons em blocos Gutenberg

Se está a desenvolver blocos personalizados, os Dashicons também funcionam aí. Ao registar um bloco via registerBlockType, defina o parâmetro icon com o nome de um Dashicon:

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

Para componentes React na área de administração, está disponível um componente Dashicon pronto a usar do pacote @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
);

Isto funciona apenas na área de administração (editor de blocos, páginas de configurações). No frontend, o componente Dashicon não carrega os estilos; continua a precisar de wp_enqueue_style('dashicons') nesse contexto.

⁉️🤔 Perguntas frequentes

Preciso de instalar um plugin para usar os Dashicons?

Não. Os Dashicons estão integrados no núcleo do WordPress desde a versão 3.8. Na área de administração são carregados por padrão. Para o frontend, basta uma única linha (wp_enqueue_style('dashicons')) no functions.php.

Por que razão os Dashicons são melhores do que o Font Awesome?

Pelo tamanho e pela ausência de dependências externas. O Font Awesome contém mais de 2000 ícones, a maioria dos quais nunca vai precisar. Os Dashicons têm cerca de 300, todos pensados para o WordPress, e a folha de estilos já está no seu servidor. Se o ícone existe no catálogo dos Dashicons, use-o e evite o inchaço.

Que ícones estão disponíveis nos Dashicons?

Cerca de 300: tipos de conteúdo, multimédia, redes sociais, editor, notificações, taxonomias, widgets e glifos específicos do WordPress (Produtos, Buddicons). Uma lista completa e pesquisável está disponível em developer.wordpress.org/resource/dashicons.

Posso adicionar o meu próprio ícone aos Dashicons?

Não. Desde junho de 2023 que o projeto deixou de aceitar pedidos para novos ícones. Se o glifo de que precisa não está no catálogo, use Font Awesome, Fontello ou carregue um SVG personalizado.

Por que razão os ícones não aparecem no frontend?

Muito provavelmente esqueceu-se de chamar wp_enqueue_style('dashicons'). Verifique o seu functions.php: a chamada deve estar ligada ao gancho wp_enqueue_scripts. Outra causa possível é um tema ou plugin estar a remover os Dashicons via wp_dequeue_style.

Vale a pena usar Dashicons em 2026

Resposta curta: sim, para a área de administração e necessidades simples de frontend. Dashicons significa sobrecarga zero, renderização previsível e integração total com a interface do WordPress. Para tipos de conteúdo personalizados e itens de menu de administração, continua a ser o padrão de facto.

Compreenda as limitações desde já: o conjunto de ícones está congelado e não serão adicionados novos ícones. Se está a construir um site com um design visual rico, o Font Awesome ou um sprite SVG personalizado dar-lhe-ão mais flexibilidade. Mas para a maioria das tarefas típicas do WordPress, a fonte integrada é mais do que suficiente, e arrastar uma biblioteca com mais de 2000 glifos para três ícones não faz sentido.

A forma mais rápida de adicionar um ícone para um tipo de conteúdo personalizado é copiar a classe do catálogo dos Dashicons e colocá-la em menu_icon. Demora 30 segundos e não requer plugins.

Se este material lhe foi útil, veja o tutorial em vídeo sobre a utilização de Dashicons em menus de navegação: está em inglês, mas cada passo é mostrado no ecrã, pelo que pode acompanhar sem necessidade de tradução.