Freecodecamp: Using <i> vs <span> for icons.

[darrenbkl]

Using <i> for icon is a not good, fcc shouldn't teach/encourage bad practice, use <span>.

[raisedadead]

Can you cite some sources in support of this?

[darrenbkl]

<i> is used for _italic_, <span> is generic, since html does not have tag for icon, span is generally used for such purpose. The use of <i> for icon is semantically incorrect, and might confuse and mislead beginners.

From W3 HTML Language Reference:
The i element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.
https://www.w3.org/TR/html-markup/i.html

The span element is a generic wrapper for phrasing content that by itself does not represent anything.
https://www.w3.org/TR/html-markup/span.html

[raisedadead]

@darrenbkl Thanks for the links, but IMHO those are definitions of <i> and <span> tags.

Can you point us to any resources that state that this not a good practice?

On a side note, this was discussed earlier that the use of <i> is outdated in https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7512

/cc @FreeCodeCamp/issue-moderators

[raisedadead]

@darrenbkl okay here is what I found that may help:

http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span?answertab=votes#tab-top

Why are they using <i> tag to display icons ?
Because it is:

• [x] Short
• [x] i stands for icon (although not in HTML)

Is it not a bad practice ?
Awful practice. It is a triumph of performance over semantics.

Also, I may be wrong but this something which campers will find used everywhere, and I think keeping them aware of the fact that this not standard spec, is used as a common practice is the best we should do and are doing in one of the challenges already.

Refer the issue mentioned in the earlier comment where this is explained.

Do let us know your thoughts.

[ghost]

@raisedadead, I agree. We should let campers know that this is not good practice, but used all the time. I suggest we just add a sentence in the challenge instructions about this.

[raisedadead]

@atjonathan as I said its there already https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7512#issuecomment-203678412

And the OP did not mention any other specific challenge that gets affected.

[ghost]

@raisedadead, sorry didn't see that comment. I think we can close this issue then.

[darrenbkl]

@raisedadead I don't think it is used in many places.

If it's decided to let member aware of the spec, the challenge should also allows interchangeable use of those tags, i.e. not forcing the use of <i>. Just a thought.

[raisedadead]

@atjonathan lets wait for OP's comment.
@Bouncey thanks, but the thing is this an argument of semantics vs general practice. Where IMO the later wins.

[raisedadead]

@darrenbkl Yeah, you are correct indeed. We should allow alternative use. Thanks for reverting.

[raisedadead]

To contributors:

Change Text Inside an Element Using jQuery needs to be updated with instructions and tests to allow alternative use of <i>

Please comment and share your proposal before making a PR.

[AkiraLaine]

@darrenbkl I don't think anyone uses the span tag to display icons. In fact, contrary to what you say, every major icon provider (Font Awesome, Google Icons...etc) uses the i tag for it.

To empathize(italicize) text, you should use the em tag.

[ghost]

I agree with @AkiraLaine.

[AryanJ-NYC]

https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-our-buttons
https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-all-of-our-buttons

Two more links where <i> is used and <span> is not.

[dhcodes]

I'm working on this one. Will have a PR in later today.

[sagayev]

This was accepted:
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button>

But this was not:
<button class="btn btn-block btn-primary fa fa-thumbs-up">Like</button>

Although they yield the same result. I am newbie here. I don't know if the latter has any side effect..

[raisedadead]

@sagayev please open a new issue.

[erictleung]

@Mielai1l they've been changed in the codebase. You can see for yourself in the beta site. Changes will be pushed to the production site soon.