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

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

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

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


html css font-awesome font-awesome-5
person Muhammad Asif Mohtesham    schedule 25.04.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Разница между 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

person Temani Afif    schedule 25.04.2018

arrow_upward
0
arrow_downward

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

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

person Jerodev    schedule 25.04.2018