Font Awesome: Aprenda a Utiliza-lo Em Seus Projetos

Programador Viking 10 de dezembro de 2019 2 Comentários Leitura: 3 min

Font Awesome: Aprenda a Utiliza-lo Em Seus Projetos

Primeiramente, o Font Awesome nada mais é do que um conjunto de ícones baseados em webfont e CSS. O lançamento foi em 2012 por Dave Gandy, um excelente desenvolvedor.

Desde então, este conjunto de ícones conquistou um enorme espaço na comunidade de devolvedores, se tornando uma referencia visual em diversos projetos.

Ou seja, a proposta desta tecnologia é a seguinte:

Por que devemos utilizar ícones, se podemos carregar uma webfont com um set espetacular deles?

Show se bola essa sacada né?

E sabe o que é melhor? O Font Awesome é totalmente gratuito.

Existe uma versão premium, que vem com ainda mais ícones para utilizar, mas fica tranquilo pois o pacote grátis da conta do recado em quase todos os projetos.

Enfim, agora vou te mostrar como utilizar os ícones do Font Awesome em seus projetos, pode ser utilizados tanto em websites ou blogs.

Confira neste artigo:

Como instalar Font Awesome

Para utilizar os ícones do Font Awesome é muito simples, basta adicionar 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">

Observação: Não é necessário fazer o download ou instalação de algum software local.

Além disso, para utilizar os ícones do Font Awesome, você precisa informar o prefixo fa e o nome do ícone.

Clique Aqui para acessar a Lista de Ícones:

Exemplos de ícones

Vou mostrar aqui alguns exemplos e variações que você pode utilizar

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

O resultado do código acima é este:

O Font Awesome foi criado para ser utilizado com elementos embutidos, logo, são usados amplamente para ícones.

Repare que se você alterar o tamanho da fonte ou a cor do contêiner do ícone, o mesmo será alterado.

Veja também: Cursos GRATUITOS De Programação Com Certificado

Ou seja, esta regra também vale para sombras e qualquer outra propriedade que seja herdada usando o CSS.

Ícones Maiores

A fa-lg (33% de aumento), fa-2x, fa-2x, fa-3x , fa-4x ou fa-5x são classes utilizadas 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 utilizadas 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?

Além disso, todos os ícones estão disponíveis no 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.

Portanto, 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

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.

Não perca tempo! Dê um passo decisivo em direção ao seu sucesso profissional agora mesmo. Basta clicar no botão abaixo e abrir as portas para mais de 1400 cursos completos, todos com certificados válidos.

ACESSAR CURSOS COM CERTIFICADO

Você já utilizou o Font Awesome em algum projeto?
Deixe seu comentário!

Enfim, muito Obrigado pela audiência e lhe desejo TERABYTES DE SUCESSO!!! 💻