Usando Font Awesome

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.

<link rel="stylesheet" href="/css/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:

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

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.