Should I use <i> tag for icons instead of <span>?

html semantic-markup
Jashwant picture Jashwant · Jun 21, 2012 · Viewed 260.1k times · Source

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 now uses span for icons. Official Doc

Answer

Quentin picture Quentin · Jun 21, 2012

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.

Related questions

<code> vs <pre> vs <samp> for inline and block code snippets

My site is going to have some inline code ("when using the foo() function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want …

Read More
CSS/HTML: What is the correct way to make text italic?

What is the correct way to make text italic? I have seen the following four approaches: <i>Italic Text</i> <em>Italic Text</em> <span class="italic">Italic Text</…

Read More
Valid to use <a> (anchor tag) without href attribute?

I've been using Twitter Bootstrap to build a site, and a lot of its functionality depends on wrapping things in <a>, even if they're just going to execute Javascript. I've had problems with the href="#" tactic that Bootstrap's …

Read More