Como usar a Font Awesome (com exemplos)

Por | Atualizado em 2016-01-25

A Font Awesome é um conjunto de ícones altamente personalizável, que pode ser usada gratuitamente (mesmo para uso comercial). Para começar a usar a Font Awesome, basta adicionar 2 linhas de código nas suas páginas.

Atualmente, a Font Awesome disponibiliza mais de 600 ícones. A nossa primeira preocupação, foi o impacto que este recurso poderia ter na velocidade da página.

Nos nossos testes (usando a MaxCDN) a Font Awesome adicionou “apenas” 65.1KB, que foram carregados em 27ms (um dos elementos que carregou mais rápido). Uma agradável surpresa, tendo em conta as enormes potencialidades deste recurso.

font awesome velocidade-min

Como usar a Font Awesome?

A Font Awesome permite introduzir os ícones desejados através das tags <i> ou <span>. Para começar, 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 qual o 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">

OU

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

Exemplos Font Awesome

Após a instalação, já poderá usar os ícones livremente. Para usar um determinado ícone, será necessário conhecer o “código” de identificação. Poderá consultar a lista completa aqui: Ícones Font Awesome.

Tal como já foi referido, os ícones são “chamados” usando a tag “i”. No entanto, podem ser personalizados como se fossem um tipo de letra (Fonte). Por exemplo:

<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-official" style="font-size:48px;"></i>
<i class="fa fa-facebook-official" style="font-size:80px;color:#8b9dc3"></i>

Resultado:

Criar uma lista com o Font Awesome:

Os leitores adoram as listas, elas permitem uma melhor organização e visualização da informação. Dê outra vida às suas listas em HTML, usando ícones personalizados. Aqui fica um exemplo:

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Quadrado</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-square"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-hand-o-right"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-plus-square"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-arrow-circle-right"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-caret-right"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-star"></i>Lista de ícones</li>
<li><i class="fa-li fa fa-chevron-right"></i>Lista de ícones</li>
</ul>

Resultado:

  • Quadrado
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones

Pretende um menu personalizado sem gastar dinheiro?

O Font Awesome também pode ser usado em menus CSS, proporcionando um aspecto bastante profissional. O método de funcionamento é exactamente igual, bastando usar os elementos <i> ou <span>.

como usar a font awesome menus

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *