Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫

Should I use i tag for icons instead of span?

Why are they using <i> tag to display icons ?

Because it is:

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

Is it not a bad practice ?

Awful practice. It is a triumph of performance over semantics.

Why does font-awesome recommend using i elements instead of span elements? Is one preferable for a concrete reason?

I've never experienced a difference in user experience between the i element or a span with a css style that makes the text italics.
The reason why you might want to prefer the span element is just semantic (separation of content and style).

What is the proper use case for html i element?

It should be used to make text styled italic. Most semantic uses for italic text are <em>, as it is supported by screen-readers for emphasis.

<i> and <b> are slowly going out of fashion in favour of using CSS to style text, and preserving <em> and <strong> for accessibility reasons.

I guess that it was selected for icons since it is the closest element and makes alphabetic sense (i.e. i = icon).

How to use i tag with icons?

The <i> tag is used to signify that the text within should be italic. It doesn't make sense to use it in this context.

If you still want to keep it and not use something else like a div, the problem is that the <i> tag is an inline element, not a block element like a div. Add display: inline-block; to your CSS and it will work.

Font Awesome accessibility issue. Use em tags instead of i

As a general guideline, you should use em for emphasis instead of i for italic text because italic text is normally used only to imply emphasis.

In this case, you are using i for icon, which is nonsense (and confusing your accessibility checking tool). Use a span instead. That doesn't come loaded with any inappropriate semantics.

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

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.

What does the i tag mean in this angular bootstrap example?

< i > was the tag for italics, but nowadays, in the way you're using it (with class="fa ...", is used for Icons.

There're several ways to use it, but when you see somehing like
<i class="fa ..." fa stands for FontAwesome.

FontAwesome is a famous gallery of icons (and other graphics)
Here you have access to the free galery:
https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

In order to use some icon, you only have to get its name.
For instance, the second icon of that list, the icon of accesibility, you would use it in that way:

<i class="fa fa-accessible-icon"></i>

You only have to click in the icon you like, and it opens a page when the web itself shows the exact way to use the icon (in the way as I show you above), along with other ways to use it (filled, flat, larger, etc).

EXTRA: Dynamic selection of the icon with ngClass

In your example, beside the i for icon, has the peculiarity that the second parameter that i needs, is being set dynamically with [ngClass].

For instance, whereas a 'regular' icon is in that way:

<i class="fa fa-chevron-down"></i>

Your code is putting actually all these icons:

<i class="fa fa-chevron-down"></i> // If the isAssignedTasksVisible variable is true
<i class="fa fa-chevron-up"></i> // If the isAssignedTasksVisible variable is false

It does so thanks to [ngClass], in this part of the code:

[ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}

NOTE: Hi folks! I see in the comments that it creates controversy xD, but I'm just saying how it's used nowadays by most developers on the front end, please, don't kill the messenger! xD
So that if you see it in the code, you know what it is being used for and you don't have the doubt that the OP @wheeeee had, which is precisely a very common doubt because of the "double use" that is given to that <i tag and that you are emphasising in the comments. Have nice and see you around!

---

Related Topics