Font Awesome 5 on pseudo-element displays square instead of icon

Question

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

1) I have imported the FA from the documentation and

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) My html looks like this:

<span class='myClass'>Movies</span>

3) Now let's say I want to change the content of a range with an icon directly from the CSS page.

My css currently looks like this, but it doesn't work, it gives me a square instead of an icon.

.myClass {
  font-size:25px;
}

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

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

Interestingly, it looks like it's using some icons. If I test with content: 'f007'; it works. Do you know why?

(If you're wondering why I want to change the icon directly in CSS, it's because I'm using media queries so I can't add it directly in the HTML page)

Answer 1

From your comment:

Test with transparent colors text-lines for thinner rendering:

.myClass {
  font-size: 45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
  -webkit-text-stroke;
  transparent 0.2em;
}

.myClass+.myClass::after {
  -webkit-text-stroke: white 0.02em;
}

.bis {
  font-size: 4rem;
  color: blue
}

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

Answer 2

^{If you are using the JS SVG version, please read the following: Font Awesome 5 appears empty and 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>