Como usar os ícones do FONT AWESOME 4

Quem usa o framework Booststrap 3 conhece muito bem os glyphicons, no entanto, alguns usuários podem se frustar com as poucas opções ofertada pelo framework, tanto que na versão 4 do Bootstrap os ícones foram extintos.

Para resolver estra frustração podemos adotar outro framework que trabalha apenas com ícones, o Font Awesome, que oferece atualmente 675 ícones dos mais variados temas.

Preparando o projeto.

  1. Faça o download do framework no site oficial do desenvolvedor: https://fontawesome.com/v4.7.0/icons/
  2. No menu superior, clique em GET STARTED e localize a opção de download.
  3. Ao clicar no botão do download, saia da pegadinha, clicando em No thanks…
  4. Descompacte o arquivo font-awesome-X.X.X.zip (onde X.X.X é a versão do framework)
  5. Renomeie a pasta descompactada para font-awesome
  6. Copie a pasta para a raiz do seu projeto HTML

Hands On – Preparando o código!

Agora vamos colocar a mão na massa.

  1. Crie um arquivo HTML, com estruturação padrão da versão 5
  2. Acrescente dentro do elemento <HEAD> o código chamando o framework. Preste muita atenção neste passo ao informar a pasta do framework.
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  3. Pronto! Você já pode começar a usar os ícones, o código completo ficou assim:
    <!DOCTYPE html>
    <html>
    <head>
     <title>Galeria de Imagens</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    </head>
    <body>
    
    </body>
    </html>

Usando os ícones.

  1. Todos os ícones podem ser consultados nesta página: http://fontawesome.io/icons/.
  2. Acesse essa página, escolha um ícone e clique sobre ele. Ao escolher um ícone e clicar sobre ele a página irá mostrar um exemplo de uso;
  3. Coloque o ícone no local desejado, por exemplo;
    <div class="container">
     <h1>Lista de Contatos <i class="fa fa-address-book-o" aria-hidden="true"></i></h1>
    </div>

Você também pode usar em botões. por exemplo;

 <div class="container">
    <h1>Lista de Contatos <i class="fa fa-address-book-o" aria-hidden="true"></i></h1>
    <hr>
    <button class="btn btn-default"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Cadastrar novo contato</button>
 </div>

Resultado: 

 

Tamanho dos ícones.

O Font Awesome oferece 5 tamanhos de ícones;

 

Para usá-los, basta acrescentar a classe mostrada na tabela, exemplo;

<button class="btn btn-default"> <i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Cadastrar novo contato</button>

Código completo:

<!DOCTYPE html>
<html>
<head>
 <title>Galeria de Imagens</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>

<div class="container">
 <h1>Lista de Contatos <i class="fa fa-address-book-o" aria-hidden="true"></i></h1>
 <hr>
 <button class="btn btn-default"> <i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Cadastrar novo contato</button>
 </div>
 
</body>
</html>