Question:
Currently we have noticed that a lot of people have been using the <i> tag for icons and not for italics. If we were still in the pre-HTML5 era this would be dead wrong.
As per the HTML5 <i> tag specification, it is now used for "alternative voice" text, such as transliterated foreign words, technical terms, and typography.
So, if we use Icon Fonts, which are image typographies, the code will still be semantically correct, right?
Answer:
In HTML4, the <i> tag meant italics. Over the past decade, the web standards movement has struggled to get developers to separate structure from style, which is the responsibility of CSS. But it would be tricky to remove this tag. Even if it were dropped from the spec, no browser manufacturer in their right mind would drop support, as it would break many existing sites. So they gave "a jeitinho": a new meaning for the element.
Translating from w3c markup guide :
The i element represents a piece of text detached from its context without conveying additional emphasis or importance, and for which the typographical convention of presentation is italicized text; for example, a term from a taxonomy, a technical term, an idiom from another language, a thought or the name of a ship.
It doesn't say whether or not to use it for icons, as bootstrap does. In the field of semantic markup, there are always controversies.