Font Awesome 5 (с CSS) fa-слоев

Я обновился до Font Awesome 5 (FA 5) с версии 4.7. Причиной были многослойные иконки. В FA 4.7 использовались классы fa-stack. В FA 5 слои fa очень мощные.

Проблема, насколько я вижу, fa-layers реализована только в чистой версии js Font Awesome. (используя fontawesome-all.js). Если вы хотите использовать версию css, вы не увидите класс fa-layers в структуре папок (в текущей версии 5.0.8). Можно ли использовать fa-слои с CSS-версией FA 5?

Под версией CSS я имею в виду следующее:

<head>
  <!--core first + styles last-->
  <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>

Bt Js версия, я имею в виду это:

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>

Поскольку fontawesome-all.js заменил все теги i на svg, манипулирование css в этой версии затруднено. Итак, если версия css имеет все функции, которые есть в версии Js, я бы хотел использовать версию FA 5 для CSS.

7 голосов | спросил Atilla Baspinar 22 MarpmThu, 22 Mar 2018 12:14:22 +03002018-03-22T12:14:22+03:0012 2018, 12:14:22

2 ответа


0

Нет, веб-шрифты с CSS не обладают всеми функциями SVG с JS. Как использовать SVG с JS показывает некоторые функции, которые являются новыми или эксклюзивными для SVG с JS. Слои , в частности, являются новыми для SVG с JS:

  

Слои - это новый способ визуально размещать значки и текст поверх каждого   другие, заменяя наши классические стеки значков.

Вы все еще можете использовать стеки в веб-шрифтах с CSS для выполнения некоторых интересных задач: пример codepen

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fal fa-circle fa-2x fa-stack-1x fa-inverse"></i>
  <i class="far fa-triangle fa-stack-1x fa-inverse"></i>
</span>

Но стеки определенно не так мощны, как слои со степенными преобразованиями, которые доступны только в SVG с JS.

ответил mwilkerson 12 Mayam18 2018, 01:24:56
0

Я также предпочитаю использовать версию веб-шрифтов, в основном из соображений производительности. Я также хотел использовать более сложные многоуровневые значки с классом fa-layers.

Я воссоздал некоторые функции fa-layers в CSS и поместил таблицу стилей на GitHub . Это не идеально или не завершено. Я все еще работаю над этим, но он может помочь вам получить некоторые из отсутствующих функций, не переключаясь с веб-шрифтов и CSS.

ответил dangowans 2 +03002018-10-02T20:54:32+03:00312018bEurope/MoscowTue, 02 Oct 2018 20:54:32 +0300 2018, 20:54:32

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132