Artigo original: How to Add Font Awesome Icons to Your Buttons
O Font Awesome é uma biblioteca conveniente de ícones. Esses ícones podem ser gráficos vetoriais armazenados no formato .svg ou fontes da web.
Esses ícones são tratados como se fossem fontes. Você pode especificar o tamanho deles usando pixels e eles assumirão o tamanho da fonte dos seus elementos pai do HTML.
Uso primário
Para incluir o Font Awesome em sua aplicação ou página, basta adicionar o código abaixo ao elemento <head> na parte superior do seu HTML:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">O elemento i foi usado originalmente para deixar nossos elementos em itálico, mas agora é normalmente usado para ícones. Você pode adicionar as classes do Font Awesome ao elemento i para torná-lo um ícone. Por exemplo:
<i class="fas fa-info-circle"></i>Observe que o elemento span também pode ser usado com esses ícones.
Você pode adicionar um ícone deste modo:
<i class="fas fa-thumbs-up"></i>Isso produzirá um ícone simples de "joia":
Aqui, você vê como poderia inserir o ícone em um botão:
<button>
<i class="fas fa-thumbs-up"></i> Like
</button>
Observe que há duas partes no uso do ícone, o prefixo de estilo e o nome do ícone. No exemplo acima, o prefixo de estilo e o nome do ícone são fas e fa-thumbs-up, respectivamente.
O Font Awesome oferece os seguintes prefixos de estilo:
| ESTILO | PREFIXO DE ESTILO | TIPO DE PLANO |
|---|---|---|
| Sólido | fas | Gratuito |
| Regular | far | Pro |
| Leve | fal | Pro |
| Dois tons | fad | Pro |
| Marcas | fab | Gratuito |
Os ícones de marca normalmente são enviados pela própria empresa, sendo úteis para criar coisas como botões para autenticação em redes sociais ou pagamento. Esses ícones incluem o Twitter, Facebook, Spotify, Apple e até mesmo o freeCodeCamp:
<i class="fab fa-free-code-camp"></i>
Embora você tenha acesso apenas aos ícones sólidos e de marca no plano gratuito, ainda há muitas maneiras de estilizá-los.
Estilizando ícones do Font Awesome
Para aplicações simples, você pode usar os estilos em linha:
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-thumbs-up"></i>
</span>
Para alterar o tamanho, você também pode usar as palavras-chave que vêm com o Font Awesome:
<i class="fas fa-thumbs-up fa-xs"></i>
<i class="fas fa-thumbs-up fa-sm"></i>
<i class="fas fa-thumbs-up fa-lg"></i>
<i class="fas fa-thumbs-up fa-2x"></i>
<i class="fas fa-thumbs-up fa-3x"></i>
<i class="fas fa-thumbs-up fa-5x"></i>
<i class="fas fa-thumbs-up fa-7x"></i>
<i class="fas fa-thumbs-up fa-10x"></i>
Algo que é importante de lembrar é que os ícones do Font Awesome herdam o font-size do contêiner pai. Isso significa que os ícones são dimensionados como o tamanho do texto com o qual eles serão usados, o que torna o design consistente.
Por exemplo, digamos que você quer criar vários botões. O tamanho padrão para os botões é bem pequeno. Desse modo, você escreve o CSS de maneira a aumentar o tamanho dos botões, juntamente com o texto e os ícones dentro deles:
<button>
<i class="fas fa-thumbs-up"></i> Like
</button>
<button>
<i class="fas fa-thumbs-down"></i> Dislike
</button>
<button>
<i class="fas fa-share"></i> Share
</button>button {
font-size: 1.5em;
margin: 5px;
}
Você também pode ajustar o tamanho de um ícone diretamente, marcando o próprio ícone com o CSS e ajustando seu font-size.
O Font Awesome é incrível! Como a maioria dos kits de ferramentas populares para ícones, é fácil incluí-lo e usá-lo em todos os seus projetos. É a hora de você colocar ícones em todos os seus projetos.