Esse tutorial explica o procedimento para inserir ícones junto com as categorias que são exibidas no menu. Cada categoria no menu é identificada pelo ID "c_[URI_DA_CATEGORIA]". Para adicionar ícones nas categorias do menu, será necessário criar uma regra CSS para cada categoria, da seguinte maneira:
#c_[URI_DA_CATEGORIA] > a::before {
content: url([URL_DA_IMAGEM]);
}
No caso de uma categoria que se chame "Camisetas", um exemplo:
#c_camisetas > a::before {
content: url(//e-com.club/mass/img/ecomFaviconPP.png);
}
Como você pode ver, será necessário o URL da imagem do ícone, portanto o primeiro passo será fazer o upload dos ícones na página
Upload de Arquivo, depois você adiciona uma regra como a do exemplo acima para cada categoria na página
Editar CSS, substituindo [URI_DA_CATEGORIA] pelo URI da categoria e [URL_DA_IMAGEM] pelo URL completo da imagem do ícone, mas sem "https:" ou "http:".
Para encontrar o URI de cada categoria acesse a página Categorias, e copie o texto na coluna URL.
Também será necessário adicionar em "Estilos" na página
Editar CSS o código:
.header-navigation h4 {
display: inline-block;
}
O código acima informado, serve para um ícone que aparece antes da categoria, caso queira um ícone que apareça a cima da categoria, você pode inserir o seguinte código no mesmo local informado, considerando os itens falados anteriormente sobre [URI_DA_CATEGORIA] e [URL_DA_IMAGEM] também. Segue código:
header:not(.reduce-header) li#c_[URI_DA_CATEGORIA] > a:before {
content: " ";
background-image: url([URL_DA_IMAGEM]);
background-repeat: no-repeat;
display: block;
margin: 0 auto 5px auto;
background-size: 100% 100%;
width: 40px;
height: 40px
}
Exemplo:
.header:not(.reduce-header) li#c_caneca > a:before {
content: " ";
background-image: url(//e-com.club/mass/img/ecomFaviconPP.png);
background-repeat: no-repeat;
display: block;
margin: 0 auto 5px auto;
background-size: 100% 100%;
width: 40px;
height: 40px
}
Para aparecer no menu persistente, adicione o código abaixo, ao invés do anterior:
.header li#c_caneca > a:before {
content: " ";
background-image: url(//e-com.club/mass/img/ecomFaviconPP.png);
background-repeat: no-repeat;
display: block;
margin: 0 auto 5px auto;
background-size: 100% 100%;
width: 35px;
height: 20px
}
Esse processo, deve ser feito para cada categoria do menu. Para colocar também no grid Ofertas por exemplo, deverá colocar um código como abaixo:
.header:not(.reduce-header) .dropdown100 > a:before {
content: " ";
background-image: url([URL_DA_IMAGEM]);
background-repeat: no-repeat;
display: block;
margin: 0 auto 5px auto;
background-size: 100% 100%;
width: 42px;
height: 40px
}
Para que o mesmo não apareça em mobile, sugiro colocar todo esse código criado em:
@media (min-width:992px) {
CÓDIGO
}
Em Custom.responsive.css.
