Como adicionar ícones ao menu do WordPress

Ícones no menu ajudam visitantes a identificar seções sem precisar ler cada palavra, especialmente em mobile, onde o texto é menor e o espaço é limitado. Um ícone de envelope ao lado de "Contato" ou uma casa ao lado de "Início" reduz o tempo de navegação e melhora a experiência em telas pequenas.

Existem três formas principais de adicionar ícones ao menu do WordPress, e a escolha certa depende do seu contexto:

Método 1: plugin Menu Icons by ThemeIsle

O plugin Menu Icons by ThemeIsle é a opção mais acessível: funciona com qualquer tema, não exige código e tem interface visual dentro do próprio painel de menus do WordPress. Com mais de 90.000 instalações ativas e atualizações regulares, é o método mais recomendado para quem não quer lidar com CSS.

Passo 1: Instale e ative o plugin pelo painel WordPress em Plugins > Adicionar Novo, busque "Menu Icons" e clique em Instalar.

Passo 2: Acesse Aparência > Menus.

Passo 3: Expanda qualquer item de menu na lista. Abaixo do campo de texto do item, vai aparecer uma nova opção chamada Ícone. Clique em Selecionar.

Passo 4: Escolha a biblioteca de ícones (o plugin suporta Font Awesome, Dashicons e SVG). Clique no ícone desejado.

Passo 5: Configure a posição (antes ou depois do texto), o tamanho e o alinhamento vertical.

Passo 6: Salve o menu.

O resultado aparece imediatamente no frontend sem precisar escrever nenhum código. O plugin também permite ocultar o texto do item e deixar apenas o ícone, útil para menus compactos em mobile.

Método 2: Font Awesome via CSS (sem plugin adicional)

Para quem quer evitar plugins extras ou já tem Font Awesome carregado no tema (o que é comum em temas como Astra e Hello Elementor), adicionar ícones via CSS puro é a abordagem mais limpa.

Passo 1: Certifique-se de que o Font Awesome está carregado no tema. Se não estiver, adicione o CDN em Aparência > Customizar > CSS Adicional ou via WPCode:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

Passo 2: No painel de Menus (Aparência > Menus), ative a opção Classes CSS nas configurações de tela (canto superior direito > Opções de tela > CSS Classes).

Passo 3: Expanda o item de menu, encontre o campo "Classes CSS (opcional)" e adicione uma classe específica, como menu-inicio ou menu-contato.

Passo 4: Em Aparência > Customizar > CSS Adicional, adicione o CSS usando o pseudo-elemento :before:

/* Ícone de casa para "Início" */
.menu-inicio > a:before {
    font-family: "Font Awesome 6 Free";
    content: "\f015";
    margin-right: 8px;
    font-weight: 900;
}

/* Ícone de envelope para "Contato" */
.menu-contato > a:before {
    font-family: "Font Awesome 6 Free";
    content: "\f0e0";
    margin-right: 8px;
    font-weight: 900;
}

O font-weight: 900 é necessário para ícones sólidos (fas). Para ícones regulares (far), use 400.

Referência dos códigos de ícones: acesse fontawesome.com e busque o ícone desejado. O código Unicode aparece na página do ícone, como f015 para casa ou f0e0 para envelope.

A documentação do Font Awesome detalha as variações de classes e tamanhos disponíveis.

Método 3: Elementor Nav Menu widget (Elementor Pro)

Para sites construídos com Elementor Pro, o widget Nav Menu permite criar menus com ícones diretamente no editor visual, sem código e com todas as opções de estilo do Elementor.

Passo 1: Abra a página no editor do Elementor.

Passo 2: Arraste o widget Nav Menu para a posição desejada no layout.

Passo 3: Nas configurações do widget, em Conteúdo > Nav Menu, selecione o menu criado em Aparência > Menus.

Passo 4: Para adicionar ícones, acesse as configurações de cada item do menu. O Elementor Pro permite associar um ícone a cada item diretamente no editor.

Passo 5: Use as opções de estilo para posicionar o ícone (antes ou depois do texto), ajustar o tamanho e a cor.

Essa abordagem mantém todo o design do menu dentro do Elementor, o que facilita ajustes futuros sem precisar de CSS externo. Para mais sobre como construir menus e layouts no Elementor, veja como colocar containers lado a lado no Elementor.

Ícones mais usados em menus WordPress

Para descobrir o código Unicode de qualquer ícone, acesse a página do ícone em fontawesome.com e localize o código na seção de detalhes.

Problemas comuns ao adicionar ícones no menu

O ícone não aparece após adicionar o CSS: Verifique se o Font Awesome está carregado na página. Abra o código-fonte da página (Ctrl+U) e busque por "font-awesome". Se não aparecer, o CDN não foi carregado corretamente.

O ícone aparece mas está fora de posição: Ajuste o vertical-align e o line-height no CSS para alinhar o ícone com o texto:

.menu-inicio > a:before {
    font-family: "Font Awesome 6 Free";
    content: "\f015";
    margin-right: 8px;
    font-weight: 900;
    vertical-align: middle;
    line-height: 1;
}

O ícone aparece no desktop mas não no menu mobile: Menus mobile muitas vezes usam uma estrutura HTML diferente. Inspecione o elemento (F12) no modo mobile e verifique qual classe é aplicada ao item de menu na versão responsiva. O seletor CSS pode precisar ser ajustado.

O plugin Menu Icons não aparece nos itens do menu: Verifique se o plugin está ativo. Se sim, tente ativar as "Opções de tela" no canto superior direito da página de Menus e certifique-se de que os campos adicionais estão visíveis.

Para entender como gerenciar plugins no WordPress e evitar conflitos, veja como desinstalar um plugin no WordPress.

@media (max-width: 768px) {
    .menu-contato > a:before {
        font-family: "Font Awesome 6 Free";
        content: "\f0e0";
        margin-right: 6px;
        font-weight: 900;
    }
}