Шрифт 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

^{Прочтите это, если вы используете версию JS + SVG: замена Font Awesome 5 на теге <li> показывает пустой квадрат}

Вы должны указать font-weight:900 (или любое значение больше, чем 600, bold или bolder) для этого.

.myClass {
  visibility: hidden;
}

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

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