Why using <span> with Font Awesome more semantically correct than <i>?

Question

I've been using Font Awesome for a while and I wonder one thing which tag should I use for it.

Here is said that they like the <i> tag for brevity, but using a <span> is more semantically correct.

I read specification for <i> and <span>. Unfortunately, I can't find the difference, they're both have the same context in which they can be used.

Answer 1

The difference between <span> and <i> is that <i> was originally intended for italics font, while <span> is intended to encapsulate a piece of content without changing any css rules immediately. In other words, <span> can be used for any custom css action you want to apply.

Therefore, from a theoretical and historical perspective, <span> would be a more proper choice.

However, <i> is much shorter and the effect in the browser is identical, so choose <i> in order to optimize your page speed with a few microseconds, and your coding speed with a few seconds.

Answer 2

It is because <i> is for italic text in html and <span> can contain any inline element. Thus using span instead of i is more semantically correct. But still <span> is also not denoting for using icons in html, so this is also not more semantically correct until you add a role as img like this:

<span class="your_awesome_font_icon" role="img"></span>