1

Possible Duplicate:
<I> tag for icons?

I've seen in FontAwesome that to use their icon fonts, they are employing an empty <i>, something like this:

<a class="btn" href="#">
   <i class="icon-refresh"></i> Refresh
</a>

instead of wrapping it with <span> like this:

<a class="btn" href="#">
   <span class="icon-refresh">Refresh</span>
</a>

I've seen some other websites employ similar technique too. AFAIK, both technique utilizes the CSS pseudo-element :before, so I wonder why do they use <i> instead of wrapping it with <span>?

Are there any advantages on using an empty <i>? And is it semantic?

Community
  • 1
  • 1
deathlock
  • 2,756
  • 5
  • 27
  • 48
  • 1
    Related/duplicates: [ tag for icons?](http://stackoverflow.com/questions/11135261/i-tag-for-icons), [How does Twitter Bootstrap's icon work?](http://stackoverflow.com/questions/10001575/how-does-twitter-bootstraps-icon-i-work) – Rob W Nov 23 '12 at 16:26
  • That pseudo element is now called `::before` – Šime Vidas Nov 23 '12 at 16:28
  • @RobW: hmm, I can't find answers on those questions that compare the `` with the ``, so I assumed it was okay to open a new question? – deathlock Nov 23 '12 at 16:30
  • 6
    "And is it semantic?" Heck no. Whoever thought of using `` for icons deserves to be skewered. That's even worse than using `` for italics, which it was originally created for, even though it wasn't semantic. I dare say zero semantics (which `` represents) beat incorrect semantics - even `` has been bestowed with brand new, proper semantic meaning in HTML5, and "icon" is not it. – BoltClock Nov 23 '12 at 16:31
  • @ŠimeVidas: is it already okay to use `::before`? Because AFAIK some browsers (IE, if I recall correctly) don't render `::before`. – deathlock Nov 23 '12 at 16:32
  • @deathlock You're asking multiple questions, that's why I said *related* (I did not vote to close, because "what are the advantages" has not been literally answered yet) – Rob W Nov 23 '12 at 16:33
  • @deathlock: Only if you don't plan to support IE8. – BoltClock Nov 23 '12 at 16:33

2 Answers2

2

The only advantage I can think of is just that <i> is shorter to write (and not to send over the wire, cause gzip doesn't care much if its i or span with 20-letters class) and it's distinctive from other markup. It is like self-made tag for icons.

But there are no other semantic value in <i> whatsoever.

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.

http://www.w3.org/International/questions/qa-b-and-i-tags/

So is it semantic? No. But no one cares, no big deal.

gkond
  • 3,818
  • 2
  • 20
  • 27
  • 1
    Well, yes. I, personally, do care too. But the impact of this abuse is so small. No one will punish for this, not users, not search engines, no one. So no big deal, really. – gkond Nov 23 '12 at 17:25
0

A point that's mentioned here could be one reason - saving bytes..

For me it's ease of use..

Community
  • 1
  • 1
000
  • 3,976
  • 4
  • 25
  • 39