Como utilizar ícones em páginas web?

Rafaella Ballerini
Rafaella Ballerini

Compartilhe

código css

Como utilizar ícones em páginas web?

Existe uma grande diferença entre a utilização de imagens e ícones quando estamos desenvolvendo uma aplicação. É natural pensarmos que um ícone, por ser um elemento gráfico e ter uma extensão de imagem (.svg, .png, .gif, ...), utiliza a tag <img>. Porém, para ícones, esta não é a tag mais apropriada.

A tag <img> é utilizada para agregar informação ao conteúdo textual, por exemplo: em uma notícia, além do que foi escrito por uma jornalista, também há a fotografia, que enriquece o conteúdo da notícia.

Por outro lado, os ícones, além de serem elementos gráficos que se comportam de maneira diferente em relação a tamanhos e dimensões, têm um valor mais estético do que informativo. Eles também possuem variadas maneiras de serem implementados, seja com tags no HTML ou mesmo utilizando "truques" no CSS. Vamos aprender isso tudo?

Fontes de ícones

A forma mais prática de adicionar um ícone em uma página web é por meio das fontes de ícones / icon fonts. Elas permitem que você converta ícones vetoriais em fontes web, ou seja, você utiliza um alfabeto formado por imagens (glifos/glyph), possibilitando seu controle por meio do CSS, através das propriedades de fonte. Se ao ler a palavra “glifos” você lembrou do Egito antigo, você está correto(a)! É como os hieróglifos utilizados na antiga civilização.

FontAwesome

Para utilizar as fontes de ícones, é necessário primeiramente encontrar uma biblioteca. Nesse artigo utilizaremos a Font Awesome, mas você pode utilizar qualquer uma que conheça, como Material Design.

Assumindo aqui uma premissa citada na documentação da FontAwesome:

FontAwesome foi projetada para ser usada com elementos inline e recomendamos usar um elemento HTML consistente para referenciá-los em seu projeto. Gostamos da tag <i> pela sua brevidade, e porque a maioria das pessoas usam <em></em> para texto semântico enfatizado / itálico atualmente. Se essa não é a sua preferência, usar um <span> é semanticamente mais correto.

Portanto, a fim de exemplificar o uso da biblioteca vamos utilizar a tag <i>.

A primeira coisa a ser feita é criar um novo cadastro na plataforma, onde você receberá um e-mail de confirmação. Em seguida, devemos fazer o download da pasta de fontes de ícone disponível no site e após essa etapa, devemos importá-la para o nosso projeto, da seguinte forma:

<link rel="stylesheet" type="text/css" href="/pasta/css/all.css">

A partir deste ponto, você pode utilizar qualquer um dos ícones disponíveis da biblioteca, sempre utilizando a class referente ao glyph que deseja adicionar. Você pode achá-los na aba de "icons" do site, e ao clicar em "start using this icon" irá encontrar o código pronto, com a classe desejada. Assim:

<i class="fas fa-award"></i>
// ícone de medalha
<i class="fas fa-bell"></i>
// ícone de sino
<i class="fas fa-clock"></i>
// ícone de relógio
<i class="fas fa-cat"></i>
// ícone de gato
ícones de medalha, ícone de sino, ícone de relógio, ícone de gato

Sempre que utilizamos algum elemento novo na tela, devemos refletir sobre a sua acessibilidade. Para isso, utilizaremos ARIA, uma especificação do W3C para melhorar a acessibilidade, de forma que o HTML não consegue sozinho.

Portanto, uma das perguntas que devemos nos fazer é: Esse ícone tem algum significado semântico ou é um elemento meramente visual?

Caso possua um significado semântico, o ideal é sempre disponibilizar uma legenda que será lida pelo leitor de tela, por exemplo: os botões de redes sociais no final das páginas. Tais botões não possuem texto visual, mas sabemos que ao clicar sob, seremos redirecionados para as páginas de Instagram, YouTube e assim por diante. Veja o exemplo a seguir:

<i aria-hidden="true" class="fas fa-bell" title="Alarme"></i>
<span class="alarme-bell">Alarme</span>

Colocamos o atributo aria-hidden="true" para a tag <i> do ícone e adicionamos um <span> com o título desse ícone que será lido na tela. Esse <span> poderá ser escondido por meio do CSS (mais para frente mostrarei a você como fazer isso), assim não atrapalha visualmente quem olhar o site, mas será lido pela tecnologia assistiva.

Se o ícone for um elemento com intuito meramente visual, o ideal é que não haja legenda para ele, assim será menos uma barreira na tela para quem estiver utilizando o leitor. Veja como fazer::

<i class="fas fa-award" aria-hidden="true"></i>

A ausência do title e o aria-hidden="true" serão responsáveis por não transmitir nenhuma informação sobre o ícone no momento em que o leitor de tela passar por sobre ele, pois é meramente visual.

Caso seja um elemento focalizável, tal como utilizamos a tag <a>, não precisamos adicionar a tag <span> e escondê-la para podermos fazer o ícone ser lido. Nesse caso, podemos utilizar o atributo aria-label, com a descrição do elemento. Veja o exemplo abaixo:

<a href="/relogio" aria-label="Veja o horário do voo">
  <i aria-hidden="true" class="fas fa-clock"></i>
</a>

FontIcon personalizada

Outra plataforma interessante é a IcoMoon, usada principalmente para utilizar ícones originais, criados por você ou sua equipe, já que ela te possibilita subir os arquivos .svg e criar sua própria fonte de ícones. Aqui na Alura temos um conteúdo extra no formato de Alura+, que ensina como fazer isso.

Image Replacement

Como vimos acima, existe uma técnica em que adicionamos uma tag <span> para escrevermos o texto que será lido com o significado do ícone. Porém essa tag será escondida pelo CSS para não aparecer na tela visualmente, apenas para ser lida pela tecnologia assistiva.

O Image Replacement é quando optamos por trocar um texto da tela por um ícone/imagem que terá o mesmo significado. Isso é usado para que tenhamos mais opções de design, não dependendo apenas de estilos de fontes lidas pelos navegadores.

Assim, o Image Replacement irá utilizar a técnica de esconder o texto dentro de um <span> por meio do CSS e apenas mostrar a imagem na tela.

Para isso, existem algumas formas diferentes que podemos desenvolver o nosso CSS. Abaixo você pode conferir alguns exemplos de imagem que além de conter o ícone, também contém o texto.

Fahrner Image Replacement (FIR)

Essa técnica consiste em adicionar uma background-image no próprio CSS do <h1> com a imagem ou ícone desejado. Dentro desse <h1> é colocada a tag <span> com o texto descritivo. Sendo assim, para esconder esse texto na tela e aparecer apenas a imagem, é utilizado display: none no CSS da tag <span>, da seguinte forma:

See the Pen Fahrner Image Replacement (FIR) by Rafaella Ballerini (@rafaballerini) on CodePen.

Stuart Langridge Image Replacement

Essa técnica não utiliza a tag span. Ela opta por utilizar o padding igual a altura da imagem e height igual a zero, além de deixar o overflow: hidden. Veja:

See the Pen Stuart Langridge Image Replacement by Rafaella Ballerini (@rafaballerini) on CodePen.

Malarkey Image Replacement (MIR)

Nessa técnica também não é utilizada a tag <span>. Para esconder o texto utilizamos o espaçamento entre as letras ou letter-spacing no CSS negativo e com valor bem alto, conforme mostrado abaixo:

See the Pen Malarkey Image Replacement (MIR) by Rafaella Ballerini (@rafaballerini) on CodePen.

Pseudo-elementos ::before e ::after

Até agora vimos como podemos adicionar os ícones na nossa página web por meio de utilização da tag <i> do HTML e do image-background no CSS. Ambos os formatos são ideais para colocarmos um ícone de tamanho médio ou grande na tela.

Mas o que fazemos quando queremos adicionar o ícone apenas como um pequeno enfeite antes de um texto, ou logo depois? No CSS utilizamos alguns pseudo-elementos para transformarmos a nossa tela com maior facilidade. Nesse caso, como queremos adicionar elementos antes e depois de algum conteúdo, utilizamos ::before (antes usado como :before) e ::after (antes usado como :after). Vamos pegar como exemplo uma lista, em que quero colocar um ícone de estrela antes de cada item. Este e outros ícones estão disponíveis na Tabela Unicode. Veja agora como ficará o nosso código:

See the Pen ::before by Rafaella Ballerini (@rafaballerini) on CodePen.

Com o list-style-type retiramos os pontos que ficam na frente de cada item por padrão e adicionamos a estrela com ::before.

Se quisermos colocar o ícone logo após cada um dos itens, deixaremos os pontos que ficam por padrão e trocaremos o ::before pelo ::after. Dessa forma:

See the Pen ::after by Rafaella Ballerini (@rafaballerini) on CodePen.

Uma observação importante é que esse ícone, quando utilizado com pseudo-elementos, não é selecionável na página, ele fica apenas como algo visual. Além disso é importante destacar que os ícones estão sendo adicionados antes do conteúdo de cada tag <li> e não antes de cada tag.

Gostou do conteúdo e quer aprender mais sobre HTML, CSS e acessibilidade? Então acesse as Formações de HTML e CSS , de Front-end, de Acessibilidade Web da Alura e mergulhe nesses mares do Front-end.

Veja outros artigos sobre Front-end