Font Awesome 5 sur le pseudo-élément affiche un carré au lieu d'une icône

Question

J'essaie de modifier le contenu du span avec l'icône Font Awesome directement à partir de la page CSS, mais je n'arrive pas à le faire fonctionner.

1) J'ai importé FA depuis la documentation et

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

2) Mon html ressemble à ceci :

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

3) Disons maintenant que je souhaite modifier le contenu d'une plage avec une icône directement depuis la page CSS.

Mon css ressemble actuellement à ceci, mais ça ne marche pas, ça me donne un carré au lieu d'une icône.

.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>

Fait intéressant, il semble qu'il utilise des icônes. Si je teste avec content: 'f007'; ça marche. Est-ce que tu sais pourquoi?

(Si vous vous demandez pourquoi je souhaite changer l'icône directement en CSS, c'est parce que j'utilise des media queries donc je ne peux pas l'ajouter directement dans la page HTML)

Answer 1

D'après votre commentaire :

Tests avec des couleurs transparentestext-lines pour des rendus plus fins :

.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

^{Si vous utilisez la version JS+SVG, veuillez lire ce qui suit : Font Awesome 5 apparaît vide et carré lors de l'utilisation de la version JS+SVG}

Vous devez ajouter

字体粗细：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>