Introdução
A primeira vez que me apercebi do uso da tag <i></i>
para aplicar icons, mais propriamente os que constam de uma fonte (tipo de letra), foi através do Bootstrap.
Alguns exemplos são a FontAwesome e a Glyphish que usam tipos de letra para fornecer icons.
Não posso dizer que tenha concordado com a ideia, mas na altura até nem estava mal pensado. Foi uma "vitória" para eles em termos de desempenho (performance):
i
como abreviatura de icon;
- tag com um tamanho super reduzido em relação às outras.
Contudo, actualmente, até a Bootstrap já deixou essa prática e recorre à tag <span></span>
para apresentar icons.
Oficialmente
Mediante o que pode ser lido no site da W3C, a tag <i></i>
tem um objectivo bem definido:
Although previous versions of HTML defined the i element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text”.
Que se traduz em:
Embora versões anteriores do HTML tenham definido o elemento i somente em termos de apresentação, o elemento tem agora propósito semântico específico de representar texto "deslocamento de seu conteúdo envolvente sem transmitir qualquer ênfase extra ou importância, e para o qual a apresentação tipográfica convencional é itálico texto ".
Resposta à pergunta
Então, se utilizarmos Icon Fonts, que são tipografias de imagens, o código continuará semanticamente correto, certo?
Tecnicamente não existe texto dentro da tag, pelo que nada vai ser lido da mesma, o que existe no caso particular do uso desta tag para apresentar icons é uma representação visual de uma imagem que está a ser aplicada via CSS.
Semanticamente é errado porque a tag não está a representar texto.