Incluir ìcones no menu superior das categorias

Pessoal,boa noite.
Estou tentando incluir ícones nas categorias do menus superior,porem já utilizei vários códigos no css nada funciona.
Alguém poderia me ajudar por favor.

Esse é um trabalho de customização individual, pois cada categoria tem um nome (ID) especifico… Tendo que ser feito uma análise de item a item no código html.

Caso tenha esse conhecimento, segue exemplos abaixo, caso não tenha, sugiro contratar um profissional (@brenonovelli).

Segue trabalho que o @brenonovelli realizou neste site https://www.zuloja.com.br/

Seria algo ± assim…

Outros tópicos com o assunto

https://comunidade.lojaintegrada.com.br/search?q=icone%20categoria

1 curtida

Ola.
obrigada pelo retorno.
Usei os códigos sugeridos,mas não tmb não funcionou.
@brenonovelli será que teria alguma outra solução.
Estou precisando muito incluir os iícone,mas todos os códigos que achei já testei e nada funcionou…
No aguardo,

Qual código você usou e qual erro deu?

1 curtida

Boa noite,tudo bem.
Segue abaixo código…

#cabecalho .menu.superior .nivel-um>li>a {
background-position: left center;
background-repeat: no-repeat;
background-size: 35%;
}

/* ícone do agua de lencois */
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background-image: url('https://cdn.awsli.com.br/454/454577/arquivos/perfume 2.png´);
padding-left: 36px;
}

/* ícone do alcool gel */
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background-image: url('https://cdn.awsli.com.br/454/454577/arquivos/gel-de-alcool.png´);
padding-left: 36px;
}

/* ícone do difusores */
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background-image: url('https://cdn.awsli.com.br/454/454577/arquivos/difusor.png´);
padding-left: 36px;
}

/* ícone do kits */
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background: url('https://cdn.awsli.com.br/454/454577/arquivos/kit-de-maquiagem.png´);
padding-left: 36px;
}

/* ícone do personalizado */
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background: url('https://cdn.awsli.com.br/454/454577/arquivos/lembranca.png´);
padding-left: 36px;
}

/* ícone do sabonete*/
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background: url('https://cdn.awsli.com.br/454/454577/arquivos/sabonete-liquido.png´);
padding-left: 36px;
}

/* ícone do sais*/
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background: url('https://cdn.awsli.com.br/454/454577/arquivos/banheira.png´);
padding-left: 36px;
}

/* ícone do sprays*/
#cabecalho .menu.superior .nivel-um>li:first-child>a {
background: url('https://cdn.awsli.com.br/454/454577/arquivos/spray.png´);
padding-left: 36px;
}

Tem alguns erros aí. Usa essa base para replicar. Vai mudando o ID da categoria.

#cabecalho .menu.superior .nivel-um>li.categoria-id-4228917>a {
    background-image: url('https://cdn.awsli.com.br/454/454577/arquivos/gel-de-alcool.png'); 
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 32px;
}

1 curtida

legal usei esse código e consegui inserir imagens no menu categorias, porém gostaria que não aparecesse o nome da categoria, somente a imagem. Como faço isso? Pode me ajudar?
Obrigada

Olhei agora seu site e seus ícones não estão lá.

1 curtida

Bom dia, eu tive que tirar pois ficaram desalinhados e cada um de um tamanho.
Vou colocar novamente (você acha que pode ser o titulo da categoria que deixa cada item de um tamanho, pois as imagens salvei todas iguais)?
Obrigada

coloca lá rapidinho para dar uma olhada para vc

Olá Maurício, muito obrigada por tentar me ajudar!!!
Voltei as imagens e consegui tirar o titulo das categorias, porém não sei como colocar tudo numa linha só.
está lá no site!!!