Font Awesome 5 Выбор правильного семейства шрифтов в псевдоэлементах

В настоящее время я запутался в использовании значка в псевдоэлементах CSS. Для fontawesome существует 4 вида семейства шрифтов: Font Awesome 5 Free, Font Awesome 5 Solid, Font Awesome 5 Brands, Font Awesome 5 Regular

Вот HTML:

<h1>Hello</h1>

Дело 1

Я использую этот значок: https://fontawesome.com/icons/twitter?style=brands

Как видите, это значок brands, поэтому семейство шрифтов: Font Awesome 5 Brands

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f099"; /* TWITTER ICON */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

ОНО РАБОТАЕТ!

Случай 2

Я использую этот значок: https://fontawesome.com/icons/phone?style=solid

Как видите, это значок solid, поэтому семейство шрифтов: Font Awesome 5 Solid

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f095"; /* PHONE ICON */
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
}

НЕ РАБОТАЕТ!

Что я сделал не так?

Как узнать, когда использовать правильное семейство шрифтов?


fonts css font-awesome font-awesome-5 pseudo-element
person Marcel Angir    schedule 04.06.2018    source источник
comment
В случае сомнений посмотрите файл fontawesome.css для класса fa-phone css, который прилагается к вашей загрузке.   -  person caesay    schedule 04.06.2018

Ответы (1)


arrow_upward
17
arrow_downward

Просто используйте их все в одном font-family, и браузер выполнит свою работу. Если он не найдет его в первом, он будет использовать второй. (Несколько шрифтов в свойстве Font-Family?)

Кстати, правильный font-family - это Free, а не Solid, потому что разница между Solid и Regular - это font-weight, и оба имеют одинаковый font-family. В font-family нет Solid и Regular, только Free и Brands.

Вы также можете заметить, что почти все Solid версии иконок бесплатны, НО не все regular версии бесплатны. Некоторые из них входят в пакет PRO. Если значок не отображается, это необязательно, font-family проблема.

Все версии Light и duotone - PRO.

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}

.icon1:before {
  content: "\f099";
  /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

введите описание изображения здесь

Ссылка: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

Связанный вопрос, связанный с проблемой font-weight: Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо значка

person Temani Afif    schedule 04.06.2018
comment
вы правы .. особенно в версии 5 это font-weight необходимо, поэтому я думаю, что usink Free достаточно - person לבני מלכה; 04.06.2018
comment
@ לבנימלכה этого мало, но обязательно;) нет regular или solid font-family ... есть только Free и Brand. - person Temani Afif; 04.06.2018
comment
Это работает, только если вы загружаетесь с помощью метода веб-шрифтов и CSS (тег link), в отличие от инфраструктуры SVG и JS (тег script). - person Todd; 24.08.2018
comment
@Todd с версией JS он также будет работать, но вам нужно проделать больше манипуляций. Вот пример: stackoverflow.com/questions/48753688/ - person Temani Afif; 24.08.2018
comment
спасибо, что только что спас меня :) кстати, команда fontawesome 5 должна это знать - person Jamaluddin Rumi; 29.09.2020