CSS: Dominando o Font Awesome

Olá Web Developers! Muitas pessoas conhecem o Font Awesome, biblioteca com vários ícones para uso em aplicações. Seu uso é bem simples, mas muitas pessoas apenas sabem utilizar os ícones. Vamos conhecer as outras funções que o Font Awesome disponibiliza que pode facilitar muito nosso trabalho.

Alterando o Tamanhos dos Ícones

Já que o Font Awesome utiliza fontes, o mais comum é utilizar o font-size para alterar o tamanho dos ícones. Mas a bilioteca também nos disponibiliza classes CSS para facilitar o controle das dimensões, que utilizam o tamanho da fonte do elemento como base.

Temos as classes fa-xs, fa-sm, fa-lg e também classes com números que vão de 2 a 10, como fa-2x e fa-5x.

<i class="fas fa-code fa-xs"></i>
<i class="fas fa-code fa-sm"></i>
<i class="fas fa-code fa-lg"></i>
<i class="fas fa-code fa-2x"></i>
<i class="fas fa-code fa-3x"></i>
<i class="fas fa-code fa-5x"></i>
<i class="fas fa-code fa-7x"></i>
<i class="fas fa-code fa-10x"></i>

Mantendo a Largura em Ícones de tamanhos diferentes

Há vários ícones de tamanhos diferentes, e isso pode passar uma impressão estranha em situações como a exibida logo abaixo:

<div class="fa-3x" >
  <i class="fas fa-file-code"></i><br />
  <i class="fas fa-sitemap"></i>
</div>

Muita gente resolveria esse problema definindo uma largura para os ícones com a propriedade width e centralizando-os. Mas isso não é preciso, pois o Font Awesome também tem uma classe para definir uma largura fixa (fixed width) para os ícones, a fa-fw. Veja a diferença agora:

<div class="fa-3x" >
  <i class="fas fa-fw fa-file-code"></i><br />
  <i class="fas fa-fw fa-sitemap"></i>
</div>

Criando Listas

Um uso muito comum com os ícones do Font Awesome é a criação de listas. Também temos classes para facilitar isso: fa-ul e fa-li.

O fa-ul deve ser colocado no elemento <ul> ou <ol>. Ele esconde o marcador padrão dos elementos das listas e arruma os espaços.

Já o fa-li deve ser colocado em um container para os ícones. Ele irá posicionar os ícones no lugar certo.

<ul class="fa-ul" >
  <li>
    <span class="fa-li">
      <i class="far fa-square"></i>
    </span>
    Primeiro Item
  </li>
  <li>
    <span class="fa-li">
      <i class="fas fa-check-square"></i>
    </span>
    Segundo Item
  </li>
  <li>
    <span class="fa-li">
      <i class="fas fa-sitemap"></i>
    </span>
    Terceiro Item
  </li>
</ul>

Veja que o fa-li já ajusta de tal maneira que nem precisamos utilizar a fa-fw.

Girando Ícones

Há momentos que encontramos um bom ícone, mas ele não está do jeito que queríamos. Talvez se ele estivesse virado para outro lado seria perfeito. Não precisamos manipular isso, pois outra vez o Font Awesome já inclui classes para isso.

Primeiro tem os rotate, que rotacionam o ícone. No final do nome da classe podemos colocar 90, 180 e 270, indicando os graus que queremos rotacionar.

<i class="fas fa-coffee"></i>
<i class="fas fa-coffee fa-rotate-90"></i>
<i class="fas fa-coffee fa-rotate-180"></i>
<i class="fas fa-coffee fa-rotate-270"></i>

Curso Go Básico

Conhecer o curso

Além dessas classes, temos também os flip, que espelham os elementos na horizontal ou vertical.

<i class="fas fa-coffee"></i>
<i class="fas fa-coffee fa-flip-horizontal"></i>
<i class="fas fa-coffee fa-flip-vertical"></i>

Bordas

Em casos que precisamos dar uma separada entre ícone e outros elementos, podemos usar fa-border para destacar o ícone com uma borda.

<div>
  <i class="fas fa-coffee fa-border"></i>
  O café é uma das bebidas mais consumidas no mundo.
</div>

Ainda não ficou tão bacana, e isso nos leva à próxima dica.

Puxando Ícones

Também podemos deixar os ícones no canto esquerdo (fa-pull-left) ou direito (fa-pull-right). Muito útil quando queremos colocar um ícone junto a um texto.

Não é preciso que o fa-border esteja junto. Coloquei aqui apenas para exemplo.

<div>
  <i class="fas fa-coffee fa-border fa-pull-left"></i>
  O café é uma das bebidas mais consumidas no mundo.
</div>

Combinando Ícones

Uma das minhas funcionalidades preferidas é a possibilidade de combinar ícones para poder criar um novo. A classe fa-stack deve ser colocada em um container com mais de um ícone, e ela será responsável por empilhá-los.

O ícone que ficará por fora deve receber a classe fa-stack-2x para que ele fique maior, enquanto o ícone que ficará por dentro deve receber a classe fa-stack-1x.

<div class="fa-stack" >
  <i class="far fa-circle fa-stack-2x" ></i> <br />
  <i class="fas fa-code fa-stack-1x" ></i>
</div>

Se você quiser colocar um ícone preto em cima de um outro ícone preto, utilize a classe fa-inverse para inverter a cor do outro ícone para que ele possa aparecer.

<div class="fa-stack" >
  <i class="fas fa-square fa-stack-2x" ></i> <br />
  <i class="fas fa-code fa-stack-1x fa-inverse" ></i>
</div>

Formação Desenvolvedor Especialista Front-end

Conhecer a formação

Animando Ícones

Outra classe muito útil é a fa-spin. Ela deixa o ícone girando, o que é muito útil para quando queremos algo como a indicação de que estamos carregando algum recurso.

<i class="fas fa-spin fa-sync"></i>
<i class="fas fa-spin fa-cog"></i>
<i class="fas fa-spin fa-coffee"></i>

O fa-spin faz o elemento girar de forma constante. Pode ser que você não queira isso, pode ser que girar aos poucos seja mais interessante. Isso fica mais fácil de entender com o exemplo a seguir, onde para ficar melhor o giro do elemento nós adicionamos a classe fa-pulse:

<i class="fas fa-spin fa-spinner"></i>
<i class="fas fa-spin fa-spinner fa-pulse"></i>

Estes foram as principais funcionalidades do Font Awesome. Ainda há mais a explorar. Já conhecia essas classes? Utiliza em seus projetos? Conta pra gente aí nos comentários!