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

Я пытаюсь изменить содержимое span с помощью значка Font Awesome прямо со страницы 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) Теперь предположим, что я хотел бы изменить содержимое диапазона с помощью значка прямо со страницы CSS.

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

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

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

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


html css font-awesome font-awesome-5 pseudo-element
person nsayer    schedule 10.04.2018    source источник
comment
что это за код значка?   -  person Temani Afif    schedule 10.04.2018
comment
@TemaniAf, если это значок фильма   -  person nsayer    schedule 10.04.2018
comment
Можете ли вы поделиться ссылкой на сайт fontawesome ... чтобы мы проверили, к какому пакету он принадлежит   -  person Temani Afif    schedule 10.04.2018
comment
Он сделал это в своей первой встроенной секции.   -  person roberrrt-s    schedule 10.04.2018
comment
@Roberrrt я имел в виду ссылку на иконку;) не библиотеку Font Awesome   -  person Temani Afif    schedule 10.04.2018
comment
Вот ссылка на значок fontawesome.com/icons/film?style=solid   -  person nsayer    schedule 10.04.2018
comment
@Roberrrt примерно так: fontawesome.com/icons/address-book?style=solid для проверки пакета, так как он может быть частью Pro   -  person Temani Afif    schedule 10.04.2018

Ответы (1)


arrow_upward
57
arrow_downward

Если вы используете версию JS + SVG, прочтите следующее: Font Awesome 5 показывает пустой квадрат при использовании версия JS + SVG

Вам нужно добавить

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>

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

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

CSS fontawesome 5 pseud element font weight

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

Поскольку \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.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

В качестве примечания, все версии light и duotone включены в пакет Pro, поэтому всегда будет отображаться пустой квадрат независимо от используемого font-weight

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

Font Awesome 5 - псевдоэлемент

Связанные вопросы

Font Awesome 5 показывает пустой квадрат при использовании версии JS + SVG

Font Awesome 5 unicode

Font Awesome 5, почему не отображается содержимое css?

person Temani Afif    schedule 10.04.2018
comment
Отлично, спасибо за объяснение! Вы знаете, что font-weight мне нужно было бы использовать, если бы light версия была бесплатной? - person nsayer; 10.04.2018
comment
@nsayer: все light иконки - PRO, поэтому в бесплатном пакете нет шрифта для них;) вы можете использовать их только в том случае, если у вас есть PRO - person Temani Afif; 10.04.2018