Шрифт Awesome показывает квадрат вместо значка при использовании непосредственно в CSS

Я пытаюсь изменить содержание span С удивительным значком шрифта непосредственно со страницы CSS, но, похоже, не может заставить его работать должным образом.

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

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

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

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

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

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

.myClass {
  visibility: hidden;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: 'f008';
  visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>

забавно, что похоже, что он работает с некоторыми значками. Если я проверю с content: 'f007'; это работает. Есть идеи почему?

(и если вам интересно, почему я хочу изменить значок непосредственно в CSS, это потому, что я использую медиа-запросы, поэтому я не могу добавить его непосредственно на HTML-странице)

10
css font-awesome font-awesome-5 html pseudo-element

1 ответов

необходимо указать 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="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<span class='myClass'>Movies</span>

на regular версия значка, определенная по умолчанию font-weight, является PRO, поэтому он покажет пустой квадрат. То, что вам нужно-это solid версия:

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

enter image description here

почему другой значок работает?

потому что \f007 это иконка:https://fontawesome.com/icons/user?style=regular и, как вы можете видеть,regular один не является PRO и входит в бесплатный пакет, поэтому вам не нужно указывать font-weight. Вам нужно только указать его, когда вы хотите показать solid версия.

.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.2.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

в качестве примечания, все light версия PRO, поэтому нет font-weight для них в бесплатный пакет.

вы можете проверить документацию для больше деталей : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

enter image description here

13