Css Tutoriais

Font Awesome – 585 ícones em uma fonte

21 de October de 2015
Font Awesome

Font Awesome

Esse post é uma dica para quem ainda não conhece fontes como a Font Awesome que reúne em um arquivo de fonte 585 ícones que vão desde redes sociais a ícones de transportes, pagamento, moedas, player de video e etc...

As vantagens são muitas e posso destacar: é pratico, de graça e não perde a qualidade em dispositivos com tela retina.

Abaixo alguns ícones como exemplo:

                                               

Uma das coisas mais legais é que o uso é super simples.

01. Adicione após a tag <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

02. Vá até a lista com todos os ícones atualizados: fortawesome.github.io/Font-Awesome/icons e clique sobre o que você quer usar. Depois é só copiar e colar o código. Por exemplo, para usar o ícone do Twitter eu colocaria:

<i class="fa fa-twitter"></i>

Resultado:

03. Se quiser personalizar cor ou tamanho, adicione ao seu CSS:

.fa-twitter {
color: #888888;
font-size: 13px;
}

É possível também combinar ícones, como no caso a seguir, vou usar o ícone de círculo + o ícone do Twitter:

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Resultado:

Para sobrepor os ícones, você tem que usar a classe fa-stack . Para o ícone em tamanho regular, use fa-stack-1x e para o ícone em tamanho maior fa-stack-2x. Para inverter a cor, como fiz no exemplo acima com ícone do twitter que ficou branco, use fa-inverse.

A página de exemplos deles é bem completa e lá é possível ver outras formas de uso: fortawesome.github.io/Font-Awesome/examples.

heart


Leia Também

Deixe seu comentário

22/10/2015 ・ 00:56

eita dica maravilhosa

09/11/2015 ・ 19:01

Desde que descobri o font awesome nunca mais deixei de usar no blog de tão prático, muito bom né ❤️‍

20/11/2015 ・ 18:15

Posso te abraçar e apertar pela dica?! Vaaleu! Brigada meeeeeeesmo! ^^
Beijão!