Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

Experimente os serviços de frete da Kangu


Suporte geral sobre problemas técnicos para OpenCart v3.x.
Por fontec
#89511
Bom dia pessoal eu não tenho muita experiência com PHP, por isso eu gostaria de saber como eu poderia colocar uma fonte um icone (Awesome) nas categoria do menu: as categorias são: Departamento - Dropshipping - Open Box - Saldão.
O meu sistema já está atualizado para aceitar as versões 4,5,6 das fonte (fa fa ou fas fa)
exemplo das do icones para cada categoria:
<i class="fas fa-bars"></i>&nbsp;
<i class="fas fa-shipping-fast"></i>&nbsp;
<i class="fa fa-box-open"></i>&nbsp;
<i class="fas fa-spin fa-sync"></i>&nbsp;
Eu já tentei usar no menu.twig desta forma: <li><a href="{{ category.href }}"><i class="fas fa-shipping-fast"></i>&nbsp;{{ category.name }}</a></li>
Só que como tem um loop {% for category in categories %} as categorias se repetem em dobro.
Avatar do usuário
Por reds
Mensagens Especiais
#89517
Ola @fontec

A forma mais simples seria pegar a ordem pelo array atraves do CSS, algo como o exemplo abaixo:
Código: Selecionar todos
#menu .nav > li:nth-of-type(3) a::before {
    content: "\f0d1";
    color: #f9f8f8;
    font-family: 'FontAwesome';
    font-size: 20px;
}
Nesse exemplo pegamos o elemento de número 3 na ordem e adicionamos o ícone antes do texto.
Content: indica o que vai ser coloca, nesse caso o código do icone, para isso precisa pegar no CSS da biblioteca de icone que esta usando.
Font-family: indica a familia (biblioteca do icone).

;)
Por fontec
#89519
Boa tarde reds!
Fiz com você do jeito que você falou como você pode ver: www.fontec.com.br
Tenho mais umas dúvidas relacionado a sua função acima.
1º) Você usou a biblioteca (unicode) do caminhão truck - content: "\f0d1";
Só que que a frente do caminhão está ao contrário, por isso tentei usar este content: "\f48b"; (shipping-fast envio rápido)
Segue o link da fonte: https://fontawesome.com/v5.15/icons/shi ... tyle=solid
Está fonte se eu usar no menu.twig <i class="fas fa-shipping-fast"></i>, mostra, mais repete para as próximas categorias.

2º) Como faço para adicionar um novo icone no menu, sendo que agora não é mais o 3º e sim a 4º ( li:nth-of-type(4) ).
Terei que copiar e colar uma nova função e assim consequentemente...
Avatar do usuário
Por reds
Mensagens Especiais
#89520
Ola @fontec
Como eu disse para cada ITEM da categoria que deseja adicionar um icone, precisa dizer ao CSS qual o a categoria (nth-of-type()) e qual o icone desejado.
Digamos que:
Código: Selecionar todos
#menu .nav > li:nth-of-type(3) a::before {
    content: "\f0d1";
    color: red;
    font-family: 'FontAwesome';
    font-size: 20px;
}
#menu .nav > li:nth-of-type(4) a::before {
    content: "\f0d1";
    color: blue;
    font-family: 'FontAwesome';
    font-size: 20px;
}
#menu .nav > li:nth-of-type(5) a::before {
    content: "\f0d1";
    color: green;
    font-family: 'FontAwesome';
    font-size: 20px;
}
No exemplo deve aparecer um unico de cada cor em cada item do menu conforme marcado.
Note que para usar um ICONE do pacotde de fontIcon pro, você deve setar o mesmo como nome da fonte.
Por fontec
#89521
Até ai tudo bem eu realmente adicionei um icone para cada categoria (nth-of-type(3)), (nth-of-type(4)) e (nth-of-type(5)).
Eu acho é que os icnones que eu desejo usar exemplo:( box-open (pro) <i class="far fa-box-open"></i> ), assim como o ( shipping-fast <i class="fas fa-shipping-fast"></i> )etc.. Não funcionam porque precisam de Adiquirir uma licenção para uso, só pode ser isso que não está dando certo.
Quando você diz setar no css, você refere-se a setar a famîlia da fonte(icone)? Estou usando todas as categorias como (font-family: 'FontAwesome').
Se eu não conseguir, posso te recompensar para fazer para mim com os icones que eu desejo usar!!!
Por fontec
#89538
Acabei de enviar os dados para o acesso, me avise quando estiver alterando o site!
Para que eu possa acompanhar o procedimento sem que eu altere algo que possa dar conflito.
(11)977854475 WHATSAPP

Não basta somente preencher, deve clicar no[…]

Pagamento recorrente

Vários clientes já me pediu esta for[…]

Eu estou tentando usar o recurso de múltipl[…]

Erro em migração de servidor

Ok, obrigado. Aquele problema foi resolvido. Agora[…]