Em uma lição anterior,
você aprendeu a incluir imagens em sua página da Web.
Às vezes, porém, as pessoas não têm certeza de onde
encontrar imagens ou não são artistas muito bons.
Então, hoje, eu quero falar sobre o uso do Font Awesome.
Font Awesome é uma coleção de ícones que você pode usar para
sua página e eles são praticamente reconhecível mundialmente.
Aqui estou eu na página Font Awesome.
Quero mostrar-te como usá-la.
A primeira coisa que eu vou fazer é ir para a seleção de ícones.
Como você pode ver, existem milhares de ícones diferentes que você pode
escolher para ajudar a decorar sua página e é muito simples para você usar.
O primeiro passo é que você precisa dizer a sua página web,
hey, Eu quero usar Font Awesome.
Na seção de introdução do Font Awesome, eles fornecem o código.
Então deixe-me mostrar-lhe como é.
Aqui estou eu com um arquivo simples.
A única coisa que vai parecer nova para você é que eu tenho duas idéias únicas.
A primeira é que eu tenho um link na seção principal da minha página.
Lembre-se, a cabeça é onde guardamos
todas as informações extras que nem sempre são vistas pelo usuário,
e o que eu fiz aqui é que eu me conectei ao Font Awesome CDN.
É um acrônimo muito intimidante que significa simplesmente Rede de Distribuição de Conteúdo.
Você está basicamente fazendo um acordo onde, ei,
eu vou ligar e usar suas coisas, mas eu vou usar
esse link especial para que você saiba quantas pessoas estão usando.
Se viajarmos até a secção do corpo,
é quando vais ver uma nova etiqueta,
a etiqueta i, significa ícone.
Lembra-se da etiqueta de imagem?
Uma das coisas que você precisa ter para usar a tag de imagem é a fonte,
qual imagem você deseja usar.
Com Font Awesome, você tem que incluir uma tag de
classe, e nessa tag de classe,
você vai dizer-lhe qual imagem você deseja usar.
Então, neste caso,
estou usando o chamado “fa-raivoso”.
Vamos em frente e ver como esta página se parece.
Bem, acabamos com uma pequena pessoa zangada a olhar para nós.
Na verdade, é muito simples.
Você obtém um ícone muito pequeno cada vez que incluir esta tag.
Agora, com toda a honestidade,
minha tela está explodida muito grande, então se você executasse esse código,
o ícone seria muito pequeno.
Então, deixe-me mostrar-lhe algumas das opções que você pode fazer para ajustar o tamanho do seu ícone.
Então o que eu fiz foi entrar e copiei essa linha de
código algumas vezes e em cada um,
adicionei um atributo extra e esse é o tamanho que eu quero que o ícone seja.
Então, bem aqui, eu disse para fazer aquele ícone extra pequeno e então eu fiz médio e grande.
O 2x, 3x, 5x,
10x, etc, isso é apenas torná-lo muito maior a cada vez.
Então agora, se eu olhar para a página
novamente, definitivamente vai parecer um pouco diferente.
Na verdade, é muito grande para a tela, então
deixe-me torná-lo um pouco menor, e aí está.
Temos os ícones com tamanhos diferentes.
Cara irritada claramente não é o único que você pode fazer.
Alguns dos mais populares que você pode ver incluem o cartão de endereço.
Então eu vou copiá-lo. Ele sempre começa como o i tag com a classe, é igual,
você precisa ter fas para Font Awesome,
e em seguida, em vez de raiva,
vamos em frente e tentar um cartão de endereço.
Espero que este pareça familiar para você.
Vou fazer uma quebra de linha só para misturar as coisas um pouco lá.
Agora, quando eu atualizar a página,
você pode ver um cartão de endereço muito familiar.
Ícones são ótimos porque eles dão a sua página este tipo de
olhar realmente familiar que as pessoas fazem pensar que parece realmente profissional.
Mas há algumas desvantagens em usar ícones se você não tiver cuidado.
O mais importante é que eles não são necessariamente acessíveis por padrão.
Então, se você virasse um leitor de tela nesta página,
ele realmente apareceria como se não houvesse nenhum conteúdo.
Ou pior ainda, às vezes as pessoas usam ícones para links de mídia social.
Então deixe-me mostrar mais um exemplo antes de terminarmos com Font Awesome.
Então o que eu fiz aqui é, em vez de apenas usar esses ícones como decoração,
eu realmente coloquei no meu site
para que se eu quisesse dizer link para minha conta do Twitter,
bem aqui, eu incluiria o ícone do Twitter.
Se eu quiser me conectar ao Pinterest,
eu poderia usar este ícone do Pinterest bem ali,
e LinkedIn, e ele realmente parece muito bom. Deixa-me mostrar-te.
Aqui vamos nós, tenho cada um dos meus links.
Só para você saber, a razão pela qual esses ícones são azuis é
, novamente, porque eles são links,
e em cada um, eu poderia clicar nele e ele me levaria para minha conta.
Aqui está o problema.
Parece ótimo, mas vou executar
uma verificação rápida do validador do Wave para ver se meu código está semanticamente correto.
Então eu vou para a minha versão hospedada.
Está aqui? Deixe-me encontrá-lo.
Então eu não estou usando o código que eu estava apenas usando porque para validar,
eu quero ir em frente e colocá-lo no servidor.
Então eu vou subir e vou clicar na minha ferramenta de validação do Wave,
e wave vai passar e me dar três erros.
Não apenas três erros,
mas três erros muito importantes,
e isso é simplesmente que,
hey, você tem três links e eles realmente não têm nenhum texto.
Alguém que está usando um leitor de tela
não teria idéia para onde esse link deve ir.
Ele não sabe que este é Twitter, Pinterest ou LinkedIn.
Mas eu tenho uma solução rápida muito simples para isso.
Eu vou usar algo chamado rótulo aria ou na
minha tag ou na verdade na tag ícone também.
Eu simplesmente coloquei aria-label igual,
e neste caso, eu vou colocar Twitter.
No próximo, eu posso adicionar aria-label igual a Pinterest, etc
Ao adicionar nestes rótulos aria,
você está basicamente dando aos leitores de tela a capacidade de
dizer a alguém onde esse link vai para ler um rótulo,
e isso é enorme em termos de acessibilidade.
Então eu espero que você se divirta usando Font Awesome.
Há tantos diferentes que você pode escolher,
mas se você estiver indo para jogar com alguns desses truques legais,
certifique-se de que você está tornando-os acessíveis para o maior número de pessoas possível.