Font awesome – fonte em formato de ícones

Quantas vezes nos deparamos com aquelas famosas fontes chamadas Dingbats, que ao invés de letras trazem consigo desenhos, símbolos e outras figuras. Pois bem, Font Awesome é justamente igual, e foi desenvolvida reunindo um conjunto com os ícones mais utilizados pela web afora. Tudo é feito via css e seu uso é bastante simples.

Algumas vantagens da font awesome

  • 369 ícones em uma única fonte
  • Não necessita de Java script
  • Permite o controle dos ícones via css (cores, tamanhos e etc.…)

Utilização

Cole a seguinte linha dentro do elemento head de seu site ou blog.


<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Acesse a página de ícones e escolha o que irá utilizar. Aqui irei utilizar o ícone do facebook.

obs.: O fa-facebook é o identificador do ícone e deverá ser utilizado quando aplicarmos em nosso trabalho.

Aplicando o ícone

Agora que definimos o ícone que iremos utilizar e já temos sua identificação, basta aplicarmos como mostro abaixo.

Antes

<p>Facebook</p>

Depois

<p><i class="fa fa-facebook"></i> Facebook</p>
Repare que aplicamos o elemento “I” vazio, junto da classe obrigatória “Fa” + o identiciador do ícone que no caso é o “fa-facebook”.

Resultado

Facebook

Fotmatando o ícones via css

O controle via css segue o mesmo pradão de qualquer elemento.

.fa-facebook {
color: #3b5998;
}

Facebook

Com essa técnica é possível reduzir drasticamente a utilização de imagens. Se curtiu, deixe-me saber nos comentários.

Comentários

Postagens mais visitadas