Entrando com mais um assunto bacana, sem muitas firulas e textos enormes… aqui vamos direto ao ponto.
Font Awesome é uma coleção de ícones vetoriais, totalmente escalável, usado como fonte.
Instalação:
Primeira coisa a se fazer é baixar o pacotinho no site oficial.
Próximo passo, descompactar o arquivo baixado e copiar as pastas css e fonts para o diretório do seu projeto.
diretorio_do_projeto
– css
– fonts
Crie um arquivo index.html e dentro da tag ‹head› você faz a referência ao arquivo font-awesome.min.css.
Como utilizar?
Via HTML, basta atribuir as classes fa e fa- junto com o nome do ícone a tag ‹i›.
Exemplo:
A lista completa dos ícones pode ser vista clicando aqui.
Você também pode adicionar, via CSS, usando os pseudo-elementos :before (antes do elemento) e :after (depois do elemento), incluindo o Unicode. Os pseudo-elementos :before e :after trabalham em conjunto com uma propriedade chamada content.
Exemplo:
fa-facebook-official [&#x f230 ;]
.face:before {
content: "\f230";
font-family: FontAwesome;
}
O código acima, adiciona o ícone do facebook antes do elemento com a classe face.
Clique aqui para ver mais exemplos.