{"id":34973,"date":"2023-04-27T12:31:20","date_gmt":"2023-04-27T15:31:20","guid":{"rendered":"\/tutoriais\/?p=34973"},"modified":"2025-12-18T11:42:57","modified_gmt":"2025-12-18T14:42:57","slug":"adicionar-icones-menu-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/adicionar-icones-menu-wordpress","title":{"rendered":"Adicionar \u00edcones de menu ao WordPress: 2 m\u00e9todos para facilitar a navega\u00e7\u00e3o dos usu\u00e1rios"},"content":{"rendered":"

Uma das vantagens de ter um site WordPress é que você pode personalizá-lo conforme necessário. Isso inclui, mas não está limitado a, melhorar a aparência dos menus de navegação com ícones de imagem.<\/p>

Adicionar ícones ao menu de navegação do WordPress pode torná-lo mais atraente, acessível e facilmente reconhecível. Os ícones de menu também ajudam a comunicar sua estrutura para um público internacional.<\/p>

Existem duas maneiras de adicionar ícones ao seu site WordPress: criando seu código manualmente ou usando um plugin de ícones de menu. O primeiro método oferece flexibilidade para fazer seu design ideal, mas requer conhecimento de CSS. Se você não estiver confiante em suas habilidades de codificação, recomendamos usar o segundo método.<\/p>

Continue lendo para entender como cada método funciona para escolher o melhor para suas necessidades.<\/p>

\"\"<\/a><\/figure>

\n\n\n\n\n\n\n<\/p>

Método 1. Adicionar ícones de menu usando CSS<\/h2>

Este método envolve adicionar um tipo de ícone de uma biblioteca ao seu site WordPress usando CSS personalizado<\/a>. Várias tipografias de ícones estão disponíveis para uso, o que significa que você não precisa criá-las do zero. Entre elas estão Dashicons<\/strong>, Elusive Icons<\/strong>, Foundation Icons <\/strong>e Font Awesome<\/strong>.<\/p>

Para este tutorial, usaremos a biblioteca de ícones Font Awesome. Veja como adicionar ícones de menu do WordPress usando CSS:<\/p>

    \n
  1. Vá para a página inicial<\/a> do Font Awesome <\/a>e selecione Start for Free <\/strong>(Começar de graça).<\/li>\n<\/ol>
    \n
    \"Página<\/figure><\/div>
      \n
    1. Digite seu e-mail para obter o código gratuito do Kit, que permite pegar ícones do Font Awesome a partir da biblioteca deles. O código do Kit da biblioteca deverá ser tipo assim:<\/li>\n<\/ol>
      \"Código<\/figure>
        \n
      1. Agora que você tem o código da biblioteca, o próximo passo é obter a classe CSS dos ícones do Font Awesome que você deseja usar. Vá para a página de pesquisa<\/a> do Font Awesome e salve aqueles que atendem às suas necessidades. Para este exemplo, usaremos o ícone de “casa<\/strong>” para nossa página inicial.<\/li>\n<\/ol>
        \"tela<\/figure>
          \n
        1. Acesse o painel de administração do WordPress e vá para Aparência <\/strong>-> Editor de arquivos de tema<\/strong>.<\/li>\n\n\n\n
        2. Abra o arquivo Cabeçalho do tema<\/strong> (header.php) <\/strong>e adicione o código do Kit acima da linha <\/head><\/strong>. Clique em Atualizar arquivo <\/strong>.<\/li>\n<\/ol>
          \n
          \"Colocando<\/figure><\/div>
            \n
          1. Navegue até Aparência <\/strong>-> Menus <\/strong>e expanda o item de menu que deseja personalizar. Adicione a classe CSS obtida na terceira etapa à caixa de texto Navigational Label <\/strong>na seção Menu Structure<\/strong>. Mantenha o texto do menu atual se quiser exibi-lo ao lado do ícone da imagem.<\/li>\n<\/ol>
            \n
            \"\"<\/figure><\/div>
              \n
            1. Repita a terceira e a sexta etapas para adicionar mais ícones a outros itens de menu e clique no botão Salvar menu <\/strong>.<\/li>\n\n\n\n
            2. Se o processo for bem-sucedido, seu menu ficará assim:<\/li>\n<\/ol>
              \"\"<\/figure>

              \n\n\n

              Importante!<\/strong> As etapas para adicionar ícones de menu do WordPress variam de acordo com os tipos de ícone. Por exemplo, você pode usar a biblioteca Dashicons sem editar o arquivo do tema porque é a fonte oficial do administrador do WordPress desde a versão 3.8. Algumas bibliotecas usam classes CSS para implementar ícones de imagem em itens de menu do WordPress. <\/p><\/div>\n\n\n\n<\/p>

              Método 2. Adicionar Ícones de Menu Usando um Plugin<\/h2>

              Muitos plugins simplificam o processo de personalização do menu de navegação com ótimos ícones. Recomendamos os seguintes plugins de ícones de menu:<\/p>