FontAwesome: O que é? Como instalar? _

FontAwesome - Fontes de ícones - Como Instalar
FontAwesome - Fontes de ícones - Como Instalar

por João Oliveira

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:

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:

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:

Dúvidas? Assista nosso vídeo: