Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо иконки

Я пытаюсь изменить содержимое span с помощью значка Font Awesome прямо со страницы CSS, но не могу заставить его работать должным образом.

1) Я импортировал FA из документации и в <head>

<link rel="stylesheet" href="#" onclick="location.href='https://use.fontawesome.com/releases/v5.0.9/css/all.css'; return false;" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) Мой HTML выглядит так:

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

3) Давайте теперь скажем, что я хотел бы изменить содержимое диапазона с иконкой прямо со страницы CSS.

Мой CSS в настоящее время выглядит так, но он не работает, он дает мне квадрат вместо значка.

.myClass {
  visibility: hidden;
}

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

<link rel="stylesheet" href="#" onclick="location.href='https://use.fontawesome.com/releases/v5.0.9/css/all.css'; return false;">
<span class='myClass'>Movies</span>

Ответ 1