Font Awesome 5 on pseudo elements shows square instead of icon

Question

I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can\'t seem to make it work properly.

1) I have impo

Answer 1

^{If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version}

You need to add

font-weight:900

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>

The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:

https://fontawesome.com/icons/film?style=solid

Why the other icon is working?

Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
  font-weight: 900;
}

.myClass-1::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

---

As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used

---

You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

---

Related questions

Font Awesome 5 shows empty square when using the JS+SVG version

Font Awesome 5 unicode

Font Awesome 5, why is css content not showing?