Tutorial de como usar os ícones do FONT AWESOME


Quem usa o framework Booststrap conhece muito bem os glyphicons, no entanto, alguns usuários podem se frustar com as poucas opções ofertada pelo framework.

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.

 

como usar os icones do font awesome

Preparando o projeto HTML com Font Awesome.

  1. Faça o download do framework no site oficial do desenvolvedor: http://fontawesome.io/
  2. Ao clicar no botão do download, saia da pegadinha, clicando em No thanks…como usar e instalar o Font Awesome
  3. Descompacte o arquivo font-awesome-X.X.X.zip (onde X.X.X é a versão do framework)
  4. Renomeie a pasta descompactada para font-awesome
  5. Copie a pasta para a raiz do seu projeto HTML

Hands On – Preparando o código para Font Awesome!

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 do Font Awesome.

  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;Exemplo, tutorial de uso dos ícones do Font Awesome
  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>
  4. 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: exemplo usando ícones do font awesome:

Exemplo de como usar ícones Font Awesome

Tamanho dos ícones do Font Awesome.

O Font Awesome oferece 5 tamanhos de ícones;

tamanho dos ícones do font awesome

 

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 de exemplo usando Font Awesome:

<!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>

Deixe seu comentário