FontAwesome: O que é? Como instalar?

Existem várias maneiras de exibir ícones em seu site. As mais comuns são através da utilização de imagens ou ícones.svg. Porém, estes métodos nem sempre representam a solução mais adequada. Pra isso, criaram fontes compostas exclusivamente de ícones como o FontAwesome. Ele funciona como uma fonte, porém, ao invés de letras, existem ícones.

Isso permite que você altere cores, tamanhos, planos de fundo e realize qualquer personalização possível com um texto plano. Pra instalar, siga os passos:

  1. Acesse o site: fontawesome.io
  2. Clique em Download e em No Thanks, just download FontAwesome.
  3. Depois, extraia e copie todas pastas presentes no arquivo.zip (scss, less, fonts e css) para a pasta do seu site.
  4. Entre as tags <head> do seu site, adicione o seguinte código:
<link rel="stylesheet" href="css/font-awesome.min.css"> 

Pronto! O FontAwesome já está preparado para o seu site. Agora é só adicionar os ícones. Para fazer isso, copie o código do ícone que deseja utilizar diretamente na página de exemplos e o aplique da seguinte maneira:

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

Vale lembrar que o tamanho e o estilo do ícone é definido pelo elemento que contém a tag I. Ou seja, se eu criar uma div e definir um tamanho de fonte de 50px dentro dela, o tamanho do ícone será esse. Você também pode adicionar uma classe personalizada para definir o estilo do seu ícone, por exemplo:

<style>
  .icone{
    font-size:50px;
    color:red;
    margin-left:30px;
  }
</style>
<i class="fa fa-bus icone"></i> 

Você também pode usar um CDN, basta adicionar o código de incorporação na seção <head> das suas páginas. Atualmente, a Font Awesome é distribuído através de dois CDN de elevada qualidade (MaxCDN e CloudFare). Escolha um do serviço que pretende usar nas suas páginas:

 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 

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

Caso tenha alguma dúvida, deixe o seu comentário.