Возможно ли в Font Awesome переключаться между префиксом данных «far» и «fas» с атрибутом содержимого CSS? - PullRequest
Новая
       11

Возможно ли в Font Awesome переключаться между префиксом данных «far» и «fas» с атрибутом содержимого CSS?

0 голосов
/ 25 апреля 2018
  1. Я использую атрибут содержимого CSS, потому что он загружается быстрее, чем теги.
  2. Класс значков "fa-user" имеет два набора значков, то есть "far" и "fas", но они используют один и тот же Unicode "\ f007". Это проблема.
  3. Полученный результат имеет только один недостаток. Значки загружаются через пару секунд после загрузки страницы. Следовательно, это портит UX.
  4. Использование тега добавляет к размеченной HTML-разметке.

Итак, есть ли способ использовать атрибуты содержимого CSS и переключаться между классами "far" и "fas"?

Есть предложения, чтобы решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Разница между fas и far значка составляет font-weight, поэтому для переключения между ними вам просто нужно настроить font-weight: 

.icon {
    font-family:"Font Awesome\ 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.icon:before {
  content:"\f007";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<span class="icon" style="font-weight:300"></span>
<span class="icon" style="font-weight:900"></span>

Вот еще один связанный с этим вопрос: Font Awesome показывает квадрат вместо значка при прямом использовании в CSS

0 голосов
/ 25 апреля 2018

Font Awesome 5 имеет индикаторы асинхронной загрузки , которые позволяют добавлять CSS к контейнерам значков во время их загрузки, чтобы вы могли убедиться, что они не смещают ваш макет.

Для этого не нужно использовать решение css. В любом случае, css также должен загружать внешние ресурсы, так что это может занять некоторое время.

...