image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Anna Maria
Anna Maria01/01/2021 17:38
Compartilhe

Como usar Font Awesome

  • #HTML
  • #CSS

Como usar Font Awesome

1º passo: Entre no site do Font Awesome 👈 e clique em Download

image

2º passo: Assim que abrir, role um pouco para baixo até o botão "Free for Web"

image

3º passo: Assim que clicar, um arquivo zipado vai ser baixado. 

Descompacte o arquivo usando WinRar(ou outro descompactador de arquivos).

4º passo: Assim que descompactar a pasta copie ela e cole dentro da pasta do seu projeto.

Depois de colar Renomeie a pasta para fontawesome.

image

5º passo: Agora precisamos importar essa pasta usando um editor de código.

Dentro do "Head" do arquivo HTML do seu projeto, cole a seguinte linha de código:

<link href="fontawesome/css/all.css" rel="stylesheet">

6º passo: Tudo pronto! agora é só testar.

Acesse o site do Font Awesome👈 novamente para procurar o seu ícone.

Assim que achar copie o código do ícone.

image

E cole no Body do seu arquivo html.

image

De CTRL + F5 na página e aproveite.  

Feliz ano novo pra vocês 🎉💖

Espero ter ajudado 💞

 

Alguns dos meus artigos anteriores:

💫 Ensinando a ter um servidor e um domínio GRÁTIS com GitHubPages

💫Sites para fazer download gratuito de ícones

💫Melhores extensões para trabalhar no Visual Studio Code

💫Melhores temas do Visual Studio Code

💫 Como colocar ícone ou logo do seu site na barra de endereço do navegador

💫 Como usar imagens e gifs nos seus artigos da DIO

______________________________________________________________________________________

Olá, meu nome é Anna Maria eu sou uma desenvolvedora Front-End.

Me desafiei a postar um artigo por dia aqui na DIO, com assunto diversos, mas principalmente coisas que eu tive/tenho dificuldade.

Então decidi compartilhar com vocês.

 

📌Me siga para ver mais artigos

📌 Curta( lá em cima do lado esquerdo " ^ ")

📌 Comente se te ajudou

 

Se ficar com alguma dúvida pode me contatar 📧

✨Discord: imnotannamaria#1935

✨LinkedIn: www.linkedin.com/in/anna-maria-573801191/

✨Email: aannamariabr@outlook.com

 

_Anna Maria

Compartilhe
Comentários (5)
Sandro Kuradomi
Sandro Kuradomi - 08/03/2022 23:26

Gratidão pelo tuto! Me salvou!!!

Moisés Dreckmann
Moisés Dreckmann - 07/12/2021 11:57

A importação do "All" para o HTML gera quase 120kb de peso no site, com diversos arquivos previamente carregados, que você nem pensa em utilizar. Isso faz com que caia o desempenho do site em questão de performance. Acredito que o Font Awesome não é uma boa ideia, quando se trata de otimização do site.


Estou adaptando imagens SVG no Icomoon, e isso tem demonstrado um desempenho extremamente superior ao Font Awesome. Não é tão simples quando incorporar o FA, mas vai deixar o site bem mais saudável, pensando no desenvolvimento mobile, onde em muitos lugares as pessoas utilizam 3G. Recomendo para quem estiver pesquisando sobre ícones em sites. Abraços.

Alex Bezerra
Alex Bezerra - 12/11/2021 22:24

Muito obrigado!

J

Josué - 06/11/2021 18:03

Muito bom, bem didático, obrigado

Claudinei Nobrega
Claudinei Nobrega - 01/01/2021 20:12

Ótimo tutorial Anna !!!