3

Estou utilizando um template que utiliza ícones do Font Awesome, até aí tudo bem! Mas quando quero mudar o ícone, sigo as instruções da documentação e não dá certo!

Por exemplo, o código do template é esse:

<li class="wow fadeInRight">
   <i class="icon-lock">
</li>

Se eu quiser por exemplo, mudar para o ícone do Facebook, altero <i class="icon-lock"> para <i class="fa fa-heart"> e fui ver o CSS e está assim:

.icon-lock:before {
  content: "\e62a";
}

O que significa esse CSS? O que é "\e62a" ???

Me ajudem, por favor !!!

2 Respostas 2

4

\e62a é o código (unicode) correspondente a um icone nessa fonte. Ou seja, a fonte tem uma tabela onde cada código desses corresponde a um icon.

Alguns desses códigos/icons podem ser vistos aqui: http://astronautweb.co/snippet/font-awesome/

Em relação ao teu código específico tens de reproduzir o erro para perceber-mos melhor o problema. Segundo a documentação devias ter um unicode f004.

Não te esqueças de juntar:

.fa-heart:before {
  content: "\xxxx"; /* <- aqui colocas o teu unicode */
}

jsFiddle: http://jsfiddle.net/u36nf717/

Se ainda tiveres problemas faz um jsFiddle que reproduza o problema.

1
  • 1
    +1. Eu até proponho que, depois de passar da fase de protótipo, era ideal tirar os <i ...></i> e colocar esses ::before diretamente nos estilos apropriados — o ícone é, num certo sentido, parte decorativa da página, e não faz sentido poluir o HTML com eles.
    – user25930
    Commented 5/06/2015 às 11:17
1

Muito cuidado com uma coisa: a versão 4 do FontAwesome usa esses estilos tipo "fa fa-heart" que você descreveu. Se o código que você pegou pra mexer usa ainda a versão 3 (que é o que parece, pelo "icon-lock"), você tem que consultar os nomes na lista completa de ícones. Nesse caso, você vai sempre colocar só uma classe no HTML, no caso class="icon-heart".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .