5
  1. I am using the CSS content attribute because it loads faster than the tags.
  2. The "fa-user" icon class has two sets of icons, i.e. "far" and "fas" but, they share the same Unicode "\f007". This is a problem.
  3. The result that is obtained has just one drawback. The icons load a couple of seconds after the page does. Hence, it messes with the UX.
  4. Using the tag adds up to commented HTML markup.

So, is there a way I can still use CSS content attributes and switch between the "far" and "fas" classes?

Any suggestions to solve this?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Muhammad Asif Mohtesham
  • 573
  • 8
  • 14

2 Answers2

7

The difference between the fas and the far of an icon is the font-weight so to switch between both you simply need to adjust the font-weight:

.icon {
    font-family:"Font Awesome\ 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.icon:before {
  content:"\f007";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<span class="icon" style="font-weight:300"></span>
<span class="icon" style="font-weight:900"></span>

Here is another related question: Font Awesome shows square instead of icon when used directly in CSS

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

Font Awesome 5 has asynchronous loading indicators that allow you to add css to the icon containers while they load so you can make sure that they do not shift your layout.

There is no need to use the css solution for this. And either way, the css also has to load external resources so this could take a while as well.

Jerodev
  • 32,252
  • 11
  • 87
  • 108