When you inspect a relatively new eCommerce site and find that it's using <i> for icon buttons. 😡

Isn't that how font awesome (used to) recommend(s) it?

@alexbrooklyn

That is absolutely not how one should implement a button. That is what the <button> element is for.

And Font Awesome does suggest using <i>, but later concedes that it is semantically incorrect and to use <span> instead.

Font Awesome is using <i> just because most folks are doing it... that is just wrong.

Wait until porn sites start abusing the <b> tag for bisexual. <i> could go for interracial as well.

@dmbdesignpdx most people do it because font awesome does it.

@Codex404
Still doesn't make it right.

@alexbrooklyn Just look at the font awesome homepage - it's a ridiculous piece of bloated trash reeking of unadulterated incompetence. Nobody should listen to these retards.

the fuck????

This iTag was presented to you by Apple.

Wait what...?
I got used to the <i> tag because of font awesome's suggestion.

Damn it. Now I have to remove it somehow from my brain.

@dmbdesignpdx

Agreed. They should really concede harder though. Most people don't get much farther than this.

Why can’t you just ... <button> <i class=“fa-whatever”></i></button> ?

@AmyShackles
Two problems:
1. <i> is still semantically incorrect
2. There is no text for accessibility

Two solutions:
1. Use a <span> instead, or use a pseudo element
2. Provide text

@dmbdesignpdx I thought <i> and <b> tags weren’t part of the semantic standard at all. Please correct me if I’m wrong.

@AmyShackles
They are! <i>, <b>, along with <em>, <strong> all have their own semantics, albeit slightly different.

@dmbdesignpdx what does <i> mean then? I know that it is italic but I've never heard of a semantic meaning for it.

@Codex404 MDN seems to suggest that while the original spec had no semantic meaning for <i> and <b> tags, that's been changed. When I looked it up on the HTML living standard, I found "The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts." - section 4.5.20

Though even with that specification in mind, if we're arguing that we should use a span instead of an <i>, that spec seems to indicate that you're effectively using a span when you use an <i>, but that it also indicates a change in quality of text -- which seems like an appropriate usage if you're going from a regular piece of text to an icon.

@AmyShackles <i> and <b> are subtly different from <em> and <strong>, and all of them are semantic.

You use <b> when you would write it in bold in a professional document while not putting emphasis on it so that <strong> is not appropriate. That is e.g. legal entities or proper names.

<i> is e.g. for referencing a book title in case you are not <cite>ing it as source for a <quote>. Abusing <i> for an icon is completely out of question. The only "reason" is that both start with 'i'.

An icon is not even text at all. If used as UI element, it shouldn't even appear in the markup because it isn't a content image. It should go as background image in an appropriate container. The icon subtitle (NEVER omit these) either goes as text into the container, or nearby, or at the very least pushed offscreen for screenreaders. If it's a link, both have to be within the anchor text.