Usar <i> para ícones

[rickbenetti]

Volta e meia vejo nos frameworks e sites dos mais diversos usarem a tag <i> para ícones eu sempre considerei errado, mas fica cada vez mais difícil fugir desta utilização.

No stackoverflow a discussão é longa e velha, gostaria de saber da opinião do pessoal e seus usos.

[fdaciuk]

O <i> é usado para ícones porque é uma tag de nome curto, o i lembra icon e é isso. Poderiam usar span, mas porque usar 4 letras se eu posso usar uma e deixar muito mais claro?

Obviamente esse não é o uso correto do <i>. O HTML5 trouxe com ele um valor semântico, para definir um trecho de humor, alguma palavra que precisa (visualmente) ser "italizada", ou ainda uma palavra em outro idioma (antes só daria pra simular isso com o uso do atributo lang).

Mas assim: se for pra falar de "uso correto estrito", nunca se deveria usar <i> para ícones.

Olhando por um lado menos "xiita", uma imagem não é uma representação textual, e normalmente ícones usados com <i> ficam em background, deixando a tag vazia, logo, acredito que não haveria problemas em usar essa tag para ícones.

Problemas, eu digo, de UX mesmo. A ideia da semântica da tag é facilitar para que leitores de tela entendam o que o conteúdo dentro dela significa. Com certeza não vai bugar o leitor se a tag estiver vazia =)

E sim, é uma discussão longa mesmo, nunca vai se chegar a lugar nenhum com ela 😜

[felipefialho]

Complementando o que o @fdaciuk disse, acredito que a tag mais correta para ícones continue sendo <span aria-hidden="true"> já que não carrega valor semântico nenhum e é um elemento inline.

[rickbenetti]

No slack o código aparece, aqui no github tu esqueceu da àspas simples.

Correção: segundo o @lfeh o uso apropriado poderia ser com <span aria-hidden>

[felipefialho]

Esqueci mesmo, rs. Arrumei.

[lagden]

Eu não uso isso já faz um tempo!
Recomendo utilizar SVG + USE...

Refs:
https://css-tricks.com/svg-sprites-use-better-icon-fonts/
http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
https://github.com/lagden/svg-localstorage/tree/0.2.0 (o último release (1.0.0) utiliza Promise não é compatível com IE)

[DevCarlosAugusto]

como o @lagden falou, também não uso mais font-icons, prefiro o SVG, recomendo inclusive esse plugin https://github.com/Keyamoon/svgxuse que ajuda a você utiliza 'SVG fragment identifiers' de arquivos svg externos, melhorando assim os sprites em SVG e para navegadores que não dão suporte(tipo nosso amigo IE9+ até o EDGE 12) ele faz um uma requisição e coloca os SVG's direto na página.

[felipefialho]

Boas chances de eu migrar par SVG nos próximos projetos também =)

[rodrigo-brito]

Se for olhar pelo valor semântico o <span> seria bem mais neutros do que o <i>. Se for considerar pela quantidade de caracteres, acho que nem vale muito a pena, é muito pouco se for observado como um todo dentro de um projeto.