Tempo de leitura: 4 minutos
E ai desenvolvedor tudo bem com você?
O Font Awesome se trata de um conjunto de ícones baseados em webfont e CSS, foi lançado em 2012 por Dave Gandy, um incrível desenvolvedor.
Desde então, conquistou um enorme espaço, se tornando uma referência visual em incontáveis projetos.
A proposta é bem criativa: por que utilizar ícones, se podemos carregar uma webfont com um set espetacular deles? E prontos para os mesmos efeitos e ajustes do próprio texto?
A boa noticia que tenho para você é que o Font Awesome é totalmente gratuito.
Porém há uma versão premium, que vem ainda com mais ícones, mas fica tranquilo pois o pacote grátis dá conta do recado quase em todas as circunstâncias.
E agora vamos te mostrar como usar os ícones do Font Awesome em seus projetos, sejam eles em websites ou blogs.
// Onde pegar o código dos ícones?
Como instalar Font Awesome
Para usar os ícones do Font Awesome adicione a seguinte linha dentro do <head> da sua página HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
Nota: Não é necessário fazer download ou instalação!
Você coloca os ícones Font Awesome usando o prefixo fa e o nome do ícone.
Ícones: https://fontawesome.com/icons?d=gallery
Exemplos de ícones
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css”>
</head>
<body>
<i class=”fa fa-car”></i>
<i class=”fa fa-car” style=”font-size:48px;”></i>
<i class=”fa fa-car” style=”font-size:60px; color:red;”></i>
</body>
</html>
Resulta em:
O Font Awesome foi projetado para ser usado com elemento embutidos. Os elementos são amplamente utilizados para ícones.
Observe também que, se você alterar o tamanho da fonte ou a cor do contêiner do ícone, o ícone será alterado. O mesmo vale para a sombra e qualquer outra coisa que seja herdada usando CSS.
Ícones Maiores
A fa-lg (33% de aumento), fa-2x, fa-3x, fa-4x, ou fa-5x classes são usadas para aumentar o ícone tamanhos relativos ao seu recipiente.
Exemplo:
O código a seguir:
<i class=”fa fa-car fa-lg”></i>
<i class=”fa fa-car fa-2x”></i>
<i class=”fa fa-car fa-3x”></i>
<i class=”fa fa-car fa-4x”></i>
<i class=”fa fa-car fa-5x”></i>
Resulta em:
Ícones de lista
As classes fa-ul e fa-li são usadas para substituir marcadores padrão em listas não ordenadas.
Exemplo:
<ul class=”fa-ul”>
<li><i class=”fa-li fa fa-check-square”></i>Lista de ícones</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>
</ul>
Resulta em:
Onde pegar o código dos ícones?
Do próprio site do Font Awesome. Para escolher um ícone, clique em “Icon“, na parte superior do site. Os ícones mais escuros fazem parte da versão gratuita.
Para fazer a pesquisa de um ícone, digite o termo da busca (em inglês) na caixa. Se pesquisar por “award“, por exemplo, vai encontrar um ícone de certificado.
Conclusão de como usar Font Awesome
Gostou de aprender sobre o Font Awesome?
Deseja aprender mais sobre CSS e Ícones construindo projetos do absoluto zero?
O próximo passo para você é colocar a mão na massa comigo em projetos reais, pois além de muitos anos no mercado de desenvolvimento Web, sou professor com vasta experiência para te conduzir nesta jornada e tirar todas as suas dúvidas.
E não sou eu que digo, são os mais de 14.000 alunos capacitados por mim na Danki Code, por isso sei bem do que eu estou falando.
E uma excelente forma de você começar a desenvolver projetos reais comigo é adquirindo o Pacote Full-Stack. Nele você aprenderá desde o básico HTML até construir os projetos mais incríveis e cobiçados do mercado.
