What are the advantages/disadvantages of using the <i> tag for icons instead of <span>?
html, semantic-markup
Solution
Why are they using `<i>` tag to display icons ?
Because it is:
- Short
- i stands for icon (although not in HTML)
Is it not a bad practice ?
Awful practice. It is a triumph of performance over semantics.
Problem
Facebook's HTML and Twitter Bootstrap HTML (before v3) both use the `<i>` tag to display icons. However, from the HTML5 spec: The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. Why are they using `<i>` tag to display icons? Isn't it a bad practice? Or am I missing something here? I am using `span` to display icons and it seems to be working for me until now. Update: Bootstrap 3 uses `span` for icons. Official Doc Bootstrap 5 is back to `i`. Official doc