Início » CSS » FontAwesome: O que é? Como instalar?
FontAwesome: O que é? Como instalar?
Postado em

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:500px;
    color:red;
    margin-left:30px;
  }
</style>
<i class="fa fa-bus icone"></i>

Dúvidas? Assista nosso vídeo:

dicas fontawesome freebie html icone

Newsletter

Entre em contato

Rua Coronel Rennó, 7
Centro - Itajubá, MG

contato@zerobugs.com.br

(35) 9 9983-4788

No Youtube

No Facebook

Zero Bugs