Í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 | Quando usar | Nível técnico |
|---|---|---|
| Plugin Menu Icons | Qualquer tema, sem código | Iniciante |
| Font Awesome via CSS | Performance sem plugin extra | Intermediário |
| Elementor Nav Menu (Pro) | Sites construídos com Elementor | Intermediário |
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
| Item do menu | Ícone Font Awesome | Classe / Unicode |
|---|---|---|
| Início | Casa | fa-house / \f015 |
| Sobre | Pessoa | fa-user / \f007 |
| Blog | Artigos | fa-blog / \f781 |
| Contato | Envelope | fa-envelope / \f0e0 |
| Loja | Carrinho | fa-cart-shopping / \f07a |
| Portfolio | Imagens | fa-images / \f302 |
| Serviços | Estrela | fa-star / \f005 |
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.
Perguntas frequentes
Qual é o melhor plugin para ícones no menu do WordPress?
O Menu Icons by ThemeIsle é o mais recomendado por ser gratuito, ter mais de 90.000 instalações ativas e funcionar com praticamente qualquer tema sem configuração adicional. Não exige Font Awesome pré-instalado, pois carrega as bibliotecas de ícones automaticamente.
Posso adicionar ícones ao menu sem plugin?
Sim, usando Font Awesome via CSS com o pseudo-elemento :before. Você precisa ter o Font Awesome carregado no site e adicionar uma classe CSS a cada item de menu que quiser customizar. É mais trabalhoso mas não adiciona um plugin ao site.
Os ícones do menu afetam o SEO?
Ícones decorativos em menus de navegação não afetam o SEO diretamente. O que importa é que os textos dos itens de menu continuem descritivos e acessíveis. Ícones que substituem completamente o texto podem prejudicar a acessibilidade se não houver texto alternativo ou aria-label.
Como adicionar ícones apenas no menu mobile?
Use uma media query no CSS para aplicar os ícones somente abaixo de um certo breakpoint:
@media (max-width: 768px) {
.menu-contato > a:before {
font-family: "Font Awesome 6 Free";
content: "\f0e0";
margin-right: 6px;
font-weight: 900;
}
}
Font Awesome 6 é diferente do Font Awesome 5 para menus?
Sim. No FA6, os prefixos de alguns ícones mudaram. A classe fa-home virou fa-house, fa-shopping-cart virou fa-cart-shopping. Se você está migrando de FA5 para FA6, verifique os nomes na documentação oficial para evitar ícones que não renderizam.
