Ir ao conteúdo

Font awesome do jeito certo

Ícones do Font Awesome 5.

O Font Awesome, talvez seja a biblioteca de ícones mais famosa do mundo. Ele facilita o desenvolvimento e contribui para dar uma consistência visual, porém, a marcação no HTML dele em sua grande maioria está incorreta.

Neste artigo, irei mostrar outra abordagem para utilizarmos o Font Awesome.

Como usamos

Após realizado o download da biblioteca e incluído ela em nossos assets,

Geralmente usamos o Font Awesome assim em nossos projetos:

<i class="fas fa-camera"></i>

Semanticamente a marcação está incorreta, a especificação da tag i, diz:

O elemento HTML <i> representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo “itálico”.

Fonte: MDN

Do jeito certo

A forma semântica é usando a tag <span>, atrelada a um atributo aria o aria-hidden=true. Dessa forma o elemento fica “oculto” para tecnologias assistivas, como um leitor de telas.

<span class="fas fa-camera" aria-hidden="true"></span>

Publicado emDrops

Seja o primeiro a comentar

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.