Icones no Menu do site – Como adicioná-los à sua navegação

Se você já olhou para um site e se perguntou como eles criam ícones de menu, você veio ao lugar certo. Os ícones de menu do WordPress adicionam um elemento visual ao seu site e incorporam ícones relevantes para guiar ainda mais os usuários às páginas que eles precisam acessar.

Resumindo, um ícone de menu é uma maneira simples e não invasiva de tornar seu site mais profissional, enquanto sutilmente dá a seus usuários um empurrão extra, indicando exatamente o que eles podem esperar ao clicar em uma guia de menu.

Além disso, adicionar ícones de menu do WordPress leva apenas algumas etapas com o plug-in correto. Você não precisa customizar o código do layout do menu ou se preocupar com configurações complicadas.

Continue lendo para aprender como adicionar os ícones de menu do WordPress e encontrar as imagens perfeitas para o seu setor e negócios.

📚 Índice:

Para adicionar facilmente ícones de menu do WordPress, você pode usar o Ícones do menu pelo plugin ThemeIsle. É de longe o plugin mais fácil de atingir o resultado desejado, e você obtém uma gama impressionante de conjuntos de ícones para escolher, incluindo as opções Font Awesome, Fontello e Genericons.

A seguir, mostraremos como configurar o plugin.

Como adicionar rapidamente seu primeiro ícone de menu

Mais adiante no artigo, veremos mais ícones específicos do setor, mas agora é a hora de adicionar ícones instantâneos a algumas guias do seu menu.

Nota: presumimos que você já tenha um menu WordPress configurado. Se não for o caso, verifique este artigo (ou este para os menus suspensos de vários níveis) para aprender como configurar o menu do WordPress.

A documentação do plugin ThemeIsle fornece um guia rápido sobre como adicionar ícones de menu se você estiver interessado. Também o cobriremos aqui com um pouco mais de profundidade.

Para começar, vá para o painel do WordPress e clique em Aparência → Menus.

cardápios

Supondo que você já tenha um menu, deverá ser capaz de ver os itens de menu sob o título Estrutura do Menu. Com vários menus, você terá que selecionar aquele que deseja editar. Há também um módulo à esquerda chamado Adicionar itens de menu, que permite criar guias de menu a partir de páginas, postagens, links personalizados e muito mais.

olha o cardápio

Encontre o menu certo e adicione um ícone

Para adicionar ícones de menu do WordPress, selecione qualquer um dos itens de menu que você já criou.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Procure o Ícone: Selecione ligação. Clique nele para navegar até a seção para adicionar um ícone a esse item de menu específico.

Por favor selecione

Por padrão, o plug-in Ícones de menu por ThemeIsle revela opções de ícone da coleção Dashicons. Sinta-se à vontade para percorrer a lista e escolher um ícone que corresponda ao título real do menu.

Por exemplo, o ícone do Customizer (caneta / caneta) seria relevante como um ícone de menu para um Blog.

dashicons

Você também pode pesquisar ícones por palavra-chave ou usar o filtro de categoria para encontrar diferentes tipos de ícones.

Categorias de ícone de menu do WordPress

Clique no ícone que deseja usar para o item de menu. Isso destaca o ícone e coloca uma marca de seleção ao lado dele.

No lado direito, você verá várias configurações para definir antes de ativar o ícone.

Esses incluem:

  • Ocultar etiqueta – Remova a etiqueta de texto e mantenha apenas o ícone (ótimo para ícones de mídia social).
  • Posição – Mude a localização do ícone em relação ao texto.
  • Alinhamento vertical – Move a localização vertical do ícone.
  • Tamanho da fonte – Amplie ou reduza o tamanho do ícone.
escolha os ícones do menu WordPress

Há uma área de visualização que fornece um exemplo da aparência do item de menu conforme você ajusta as configurações. Por exemplo, aumentar o tamanho da fonte e mover a posição do ícone para “Depois” resulta em uma nova visualização.

escreva ícone de blog

Certifique-se de que o ícone que você deseja ainda esteja destacado e clique no Por favor selecione para adicioná-lo ao seu menu.

Por favor selecione

Certifique-se de clicar Salvar menu para que os ícones sejam ativados.

Se você quiser mudar algo, você sempre pode selecionar o Remover link para recomeçar.

salvar menu

Veja o novo ícone em seu menu de interface

Verifique se o ícone realmente aparece em seu site.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Visualizar o site ao vivo permite que você veja se ele parece apresentável ou se as configurações do ícone precisam ser ajustadas.

Blog

Solução de problemas

Se você não conseguir ver o ícone ou alguns dos itens do menu, certifique-se de que as configurações do menu estejam configuradas corretamente. A parte mais importante é ter o local de exibição atribuído a esse menu, como atribuí-lo ao local do menu principal.

configuração do menu

Também é essencial verificar a guia Gerenciar locais na seção Menus, pois você pode descobrir que o menu errado está atribuído ao menu principal.

Menu Principal

Como ativar todos os pacotes de ícones compatíveis no plugin

O plugin Menu Icons by ThemeIsle vem com suporte para os seguintes pacotes de ícones:

  • Dashicons
  • Enganoso
  • Fonte incrível
  • Fundação
  • Genéricos
  • Imagens
  • Svg

Por padrão, as configurações do plug-in mostram apenas Dashicons, mas você pode ativar conjuntos de ícones adicionais se desejar. No entanto, você deve tentar limitar o número de conjuntos de ícones carregados porque cada conjunto adicional de ícones terá um pequeno efeito no desempenho do seu site.

Para habilitar todos ou alguns tipos de ícones, vá para Aparência → Menus no quadro.

Escolha o Configurações de ícone de menu língua.

Configurando os ícones de menu do WordPress

Ative todas as coleções / fontes de ícones de menu

Você verá vários Tipos de ícone Sob a Global língua:

tipos de ícones

Verifique os conjuntos de ícones que deseja adicionar como opções.

Clique no Salvar configurações botão para continuar.

verificar e salvar

Escolha um item de menu ao qual deseja adicionar um novo ícone.

Clique no botão Selecionar para esse item.

botão de seleção

Explore ícones de outras fontes

Agora você deve ver uma lista de várias categorias de ícones no lado esquerdo da janela.

Observação: se você não vir as novas categorias de ícones, tente atualizar sua página ou salvar o menu.

todos os ícones de menu do WordPress de categoria

Agora, se você digitar “Store” no campo de pesquisa, verá alguns ícones diferentes de cada coleção de ícones.

Por exemplo, a coleção Foundation fornece dois ícones para essa pesquisa, um que é uma sacola de compras e outro que é um carrinho de compras.

Ícones do menu Foundation WordPress

Com exatamente o mesmo termo de pesquisa, Font Awesome oferece mais três ícones, todos ligeiramente diferentes da coleção Foundation.

Fonte incrível

Como no tutorial acima, escolha um ícone e clique em Selecionar para adicioná-lo ao menu.

carrinho de compras

Lembre-se de pressionar o botão Salvar Menu.

visualizar e excluir

Agora o menu tem o ícone do Blog anterior e o ícone da Loja, mas desta vez de uma fonte de ícone diferente.

Resultados da interface Ícones do menu do WordPress

Como adicionar anexos de imagem e anexos SVG

O plugin também permite o upload de arquivos de imagem e SVG (vetor).

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Isso significa que você pode criar sua própria imagem ou ícone vetorial e carregá-lo, ou pode encontrar um ícone de imagem interessante em outro lugar online.

Novamente vá para Aparência → Menuse clique no Por favor selecione link para o item de menu de sua escolha.

selecione o ícone

Uma coisa que é diferente sobre os arquivos SVG e de imagem é que geralmente você precisa torná-los do tamanho perfeito antes de enviá-los para o WordPress; caso contrário, a imagem pode ser muito grande ou muito pequena, alterando o layout do menu.

Para continuar, carregue uma imagem muito pequena (isso depende do seu assunto, mas 50 × 50 px é um bom ponto de partida), realce a imagem e clique em Selecionar.

adicionar imagem

Você deve ver o ícone da imagem aparecer no backend do menu.

Imagem dos ícones do menu do WordPress

E ele aparece ao lado dos ícones anteriores, exceto como uma imagem muito mais exclusiva.

imagem na interface - ícones do menu WordPress

Comece a usar os ícones de menu do WordPress hoje

Os benefícios são abundantes quando se trata de ícones de menu do WordPress.

Eles não apenas dão vida ao seu site, mas também adicionam um elemento adicional de facilidade de uso à navegação.

Felizmente, o plugin Menu Icons by ThemeIsle facilita a implementação de ícones, imagens e ícones SVG, tudo com apenas alguns cliques.

Para outras maneiras de melhorar seus menus WordPress, confira estes guias:

Se você tiver dúvidas sobre os ícones do menu do WordPress, deixe-nos saber nos comentários.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: