Question

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

Answer 1

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.