Should I use the span tag or the i tag for an icon?

Question

I'm just curious about which one is better to use in order to add a custom icon next to my links.

<ul>
    <li><a href=""><i class="home"></i> Home</a></li>
    <li><a href=""><i class="downloads"></i> Downloads</a></li>
</ul>

or

<ul>
    <li><a href=""><span class="home"></span> Home</a></li>
    <li><a href=""><span class="downloads"></span> Downloads</a></li>
</ul>

Thanks.

Solution 1

<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.

Solution 2

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.

Use the span tag if you want to be 'politically' correct.

However, Holly's answer puts up an argument for its use: Should I use <i> tag for icons instead of <span>?

Comments

[user2152125]

Thanks. I see several sites using <i> as an icon tag, why is that though? Is it bad practice? Are they just confused?

[Ry-]

@user2152125: They’re not confused — just trying to be concise, probably. I’d say it’s bad practice, but that’s debatable :)

[cimmanon]

They use it because that's what Twitter Bootstrap recommends.

[Ry-]

@cimmanon: I was talking about the Twitter Bootstrap people. People following that advice may or may not be confused =D

[Jeromy French]

FWIW, that what Twitter Bootstrap previously recommended. Their 3.+ documentation uses span. Their 4.+ documentation switched things to svg elements.