i element for icon fonts

Question

Back in version 2, Twitter Bootstrap used <i> elements to assign icon fonts something like this:

<a href='/foo'><i class='icon-heart></i> I love you foo</a>

More recently it is recommend to use multiple class names instead of the wildcard selector: [class^="icon-"]:before, [class*=" icon-"]:before and so now we have something like this:

<a class='icon icon-heart' href='/foo'> I love you foo</a>

My question is, is the 2nd html snippet more performant than the 1st for the following reasons?:

1. there is one less HTML element
2. multiple class names is faster than wildcard selector

Answer 1

Why You Should Not Remove the Extra Element

Note that it need not be the <i> element that is used for the icon, but the point of the question is really whether a separate element is used (be it <span> or <i> or whatever), as the OP's comment states "But my question is more about simplfying one's codebase to use one less element."

First, the bootstrap page you linked to gives the following warning (in much larger print than here):

Don't mix with other components

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

That is probably because it is using the :before pseudo element for its display, which could easily conflict with other :before pseudo elements on regular components of the bootstrap framework (or in one's own design).

Second, icons are often intended as interactive content elements for user actions or user feedback, and not just for visual appeal. If it is "content" in that sense of being important for user interface, then it should be represented by a real html element as content.

Third, as Sirikon pointed out in a deleted answer (because it was not really a full answer, just a comment), the element allows for a placement of an icon at any point in the text, rather than just "before" the text content (or "after", if the pseudo element was switched). So an icon can be placed in the middle of text.

Fourth, with the dual class method of selecting (even if on a separate element), your #2 point is moot. A wildcard selector is not used either way, with our without a separate element.

There May Always be Some Exceptions

Okay, for extreme cases (as you noted in a comment), you may have enough html elements you are eliminating to see a performance change on page load (there is not likley a performance change for page functioning), but in most cases, that probably is not the case.

Even if it is the case, one still needs to evaluate if issues along the lines of the first through third points given above would warrant not removing the elements.