Página 1 de 1

Menu com fonte Awesome!

Enviado: 11 Jun 2021, 11:38
por fontec
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.

Re: Menu com fonte Awesome!

Enviado: 11 Jun 2021, 11:45
por fontec
A versão do site é 3.0.3.7 e link é www.fontec.com.br!
!!

Re: Menu com fonte Awesome!

Enviado: 11 Jun 2021, 13:39
por reds
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).

;)

Re: Menu com fonte Awesome!

Enviado: 12 Jun 2021, 13:51
por fontec
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...

Re: Menu com fonte Awesome!

Enviado: 12 Jun 2021, 18:11
por reds
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.

Re: Menu com fonte Awesome!

Enviado: 12 Jun 2021, 21:36
por fontec
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!!!

Re: Menu com fonte Awesome!

Enviado: 14 Jun 2021, 08:16
por reds
Ola @fontec

Podemos fazer isso, todo caso precisa me enviar acesso ao ftp (inbox) ou pelo email.
ou pode seguir o tutorial aqui:
https://fontawesome.com/v5.15/how-to-us ... e-yourself
Para poder usar o pacote de fontes na versão free.
;)

Re: Menu com fonte Awesome!

Enviado: 16 Jun 2021, 22:05
por fontec
Manda o seu email para que eu possa te enviar o acesso pelo FTP!!!

Re: Menu com fonte Awesome!

Enviado: 17 Jun 2021, 08:35
por reds
Ola @fontec

Nos envie para suporte@agenciaprai.com
;)

Re: Menu com fonte Awesome!

Enviado: 17 Jun 2021, 17:12
por fontec
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