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

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

0 голосов
/ 04 июня 2018

В настоящее время я запутался в использовании значка в псевдоэлементах CSS.Существует 4 вида семейства шрифтов для fontawesome: 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;
}

ЭТО РАБОТАЕТ!

Case 2

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

Как видите, это значок solid, поэтому font-family: 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;
}

НЕ РАБОТАЕТ!

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

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

1 Ответ

0 голосов
/ 04 июня 2018

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

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

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

И все версии Light являются 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.8.1/css/all.css" >

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

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