image

Bootcamps ilimitados + curso de inglés para sempre

80
%OFF
Anna Maria
Anna Maria01/01/2021 17:38
Compartir
Microsoft Certification Challenge #3 DP-100Recomendado para tiMicrosoft Certification Challenge #3 DP-100

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

Compartir
Recomendado para ti
Ri Happy - Front-end do Zero
Microsoft 50 Anos - Prompts Inteligentes
Microsoft 50 Anos - GitHub Copilot
Comentarios (5)
Sandro Kuradomi
Sandro Kuradomi - 08/03/2022 23:26

GratidĂŁo pelo tuto! Me salvou!!!

Moisés Reis
Moisés Reis - 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 !!!

Recomendado para tiMicrosoft Certification Challenge #3 DP-100