Question
At first this question seem simple, from all the real life examples I have seen, is used for displaying icons. For example the twitter bootstrap icons.
However, when I search tag in google, the w3c school says is for italic text.
I am confused, if is used for italic text, why is everyone using it for icons? What is the proper use of this tag??
Solution
It should be used to make text styled italic. Most semantic uses for italic text are <em>, as it is supported by screen-readers for emphasis.
<i> and <b> are slowly going out of fashion in favour of using CSS to style text, and preserving <em> and <strong> for accessibility reasons.
I guess that it was selected for icons since it is the closest element and makes alphabetic sense (i.e. i = icon).
OTHER TIPS
Because HTML has become perverted over the ages.
Official "proper use" in HTML 4.01 is for italic text.
https://stackoverflow.com/questions/14815626
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<i> was the old way to make text italic in HTML.
The tag has now been redefined in HTML5 and I believe TwitterBootstrap just used this convention for icons but it is definitely not a standard way to do icons.
The <i> tag is discouraged, because it provides no semantic indication about why the text is italic.
To display italic text, the <em> tag should be used. (or a different tag with appropriate semantic meaning, combined with CSS)
More recently, people have started using <i> tags for icons, because i stands for icon.
