Search code examples
htmlsemantic-markup

What are the advantages/disadvantages of using the <i> tag for icons instead of <span>?

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

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.