fbpx

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como adicionar ícones ao seu menu WordPress

Você está em:

Como adicionar ícones ao seu menu WordPress

O recurso de menu personalizado do WordPress 3.0+ “não tão novo” não é apenas extremamente útil, mas também muito poderoso. Eu já escrevi alguns posts sobre como editar e personalizar o menu (como como destacar os links da página atual ) e hoje vou mostrar como você pode adicionar classes especiais aos seus temas para que você possa facilmente mostrar ícones personalizados ao lado dos seus links de navegação .

Adicionando um ícone inicial ao lado do link da página inicial do WordPress

Para explicar melhor como adicionar ícones, mostrarei as etapas para adicionar um ícone de tipo de casa ao lado do link da página inicial.

Etapa 1: baixe um ícone de casa legal

Por causa desta visualização, acabei de baixar um ícone inicial simples do Finicons.com – link

Passo 2: Habilite as classes no seu menu WordPress

Por padrão, o menu do WordPress não mostra os atributos de “classe” no construtor de menus, então clique nas “opções de tela” e verifique se está marcada.

Aulas de menu do WordPress

Etapa 3: adicionar estilo ao link da página inicial

Agora você pode navegar ou criar um link de página inicial e adicionar uma nova turma a ele. Eu adicionei uma classe chamada “home-link-icon”.

Classe de links iniciais do WordPress

Etapa 4: adicionar CSS para o ícone do menu inicial

Agora, a única coisa que resta é adicionar o css à sua folha de estilo para mostrar o ícone da classe que você acabou de criar. Nota: Certifique-se de adicionar o ícone baixado na etapa 1 na pasta de imagens do seu tema.

CSS de amostra

.home-link-ícone a{

   padding-left: 30px !important;

   imagem de fundo: url(imagens/home.png);

   posição de fundo: esquerda;

   repetição de fundo: sem repetição;

}

Imagem de amostra

Abaixo, você pode ver meu css em ação em um tema no qual estou trabalhando para liberar gratuitamente na minha seção Temas gratuitos do WordPress . Não está posicionado perfeitamente e o ícone não combina, mas para este tutorial você pode ver como deve funcionar.

Demonstração do link inicial do tema WordPress

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$100,00 para liberar a Black da FULL
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(