Menu
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
524
<i> isn't the icon tag, it's the italic tag, and it doesn't make much difference which you pick. <span> is more semantically correct, because it has no semantics.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons.
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.
I think the simple reason is that i is three characters shorter than span (resp. six including closing tag). This is what they say themselves: "Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct)."
Why are they using
<i>tag to display icons ?
Because it is:
Is it not a bad practice ?
Awful practice. It is a triumph of performance over semantics.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
