HTML Icons: Guia Pr�tico

�cones no HTML

A utilizaç�o de �cones no HTML moderno � feita atrav�s de bibliotecas como Font Awesome, que nos permitem adicionar �cones na nossa p�gina utilizando apenas elementos HTML.

O Font Awesome conta com �cones para todo tipo de uso, tais como: �cones de redes sociais, de e-mails, �cones de menus etc.

Veja alguns exemplos de �cones do Font Awesome na Figura 1.

Figura 1. Exemplos de �cones do Font Awesome

Font Awesome: na pr�tica

A utilizaç�o do Font Awesome em uma p�gina HTML se d� em dois passos.

O primeiro passo � a inclus�o do c�digo do script JavaScript do Font Awesome ao projeto.

Esse script deve ser criado por voc� na p�gina do Font Awesome. Para isso, basta criar uma conta no site e voc� ser� redirecionado para uma p�gina que mostrar� o C�digo 1.


  <script src="https://kit.fontawesome.com/65f22fe718.js" crossorigin="anonymous"></script>

C�digo 1. Exemplo de um script gerado pelo Font Awesome

Importante: utilizar o endereço do script desse exemplo n�o funcionar�, � necess�rio que voc� crie uma conta no Font Awesome e receba seu pr�prio endereço de script.

Com o script JavaScript adicionado, basta chamar os �cones como mostrado no C�digo 2.


  <i class="fa-brands fa-facebook"></i>

C�digo 2. Exemplo de uso de um �cone do Font Awesome

As classes utilizadas no elemento <i> podem ser encontradas no site do Font Awesome, como mostra a Figura 2.

Figura 2. �cone do Facebook no Font Awesome

Favicons

Al�m de �cones dentro da p�gina, existe um tipo de �cone especial chamado favicon. O favicon � o �cone que voc� costuma ver na aba do navegador. Veja na Figura 3.

Figura 3. Favicon do YouTube

O favicon � o �cone exibido ao lado do nome do site.

Definindo um favicon

O favicon de uma p�gina � definido no <head> da p�gina atrav�s da tag <link>. Veja como o favicon � definido no C�digo 3.


  �.
  <head>
  <link rel="icon" href="./favicon.png" type="image/png">
  <title>Minha P�gina</title>
  </head>
  �

C�digo 3. Como definir um favicon no HTML

Exemplo Pr�tico

Confira abaixo um exemplo pr�tico de uso do Font Awesome:

See the Pen FontAwesome by Eduardo Soares (@eduscxbox) on CodePen.

Ao fim da p�gina de exemplo, � poss�vel ver os links para a rede social do BioParque, os tr�s �cones exibidos vem diretamente do Font Awesome.

Conclus�o

Atrav�s de recursos como o Font Awesome e a tag <link> podemos deixar nossas p�ginas mais estilizadas atrav�s do uso de �cones que nos ajudam a passar a mensagem que queremos de maneira visual.

HTML Icons: utilizando �cones em p�ginas HTML

Nesta documentação de HTML falaremos sobre como utilizar ícones no HTML de maneira simples através da biblioteca Fonts Awesome, além de aprender como definir o favicon de uma página HTML.