A rant about icon fonts

Yesterday, I wrote about the difference between the <em> and <i> elements in HTML. Today, I want to preach about big companies ignoring the importance of this semantic difference. 😡

Font Awesome and Google Fonts promote the use of the <i> element for their icon fonts. This pisses me off because they should be using the <span> element instead.

As we learned yesterday, an <i> element represents a range of text that is set off from the normal text for some reason.

A <span> element, on the other hand, is a generic inline container for phrasing content, which does not inherently represent anything.

A <span> element, then, is the more semantic choice in the context of an icon font. We don’t want to set the icon off from the rest of the text; we just need a generic container for it.

A quote from the Font Awesome documentation:

We like the <i> tag for brevity and because most folks use <em></em> for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a <span> is more semantically correct.

You’re damn fucking right that a <span> is more semantic! Stop encouraging people to do the wrong thing!

I hate that big companies and projects, with all their influence, choose to encourage laziness for the sake of developer convenience. My good friend Chris Ferdinandi shared a post about this last week.

Semantic HTML is important. From one professional to another: please respect your craft and do the right thing. It matters. And in this case, it’s only three extra characters! Are you that fucking lazy?