HTML ICONS UTILIZANDO ÍCONES EM PÁGINAS HTML

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 3 páginas

Prévia do material em texto

HTML ICONS: UTILIZANDO ÍCONES EM PÁGINAS HTML
Í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.
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.
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.
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.
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.
Ícones no HTML
Font Awesome: na prática
Favicons
Definindo um favicon
Conclusão