9

我从 4.7 版升级到 Font Awesome 5 (FA 5)。原因是分层图标。在 FA 4.7 中，fa-stack使用了类。在 FA 5 中，fa-layers 非常强大。

据我所知，这个问题fa-layers仅在纯 js 版本的 Font Awesome 中实现。（使用 fontawesome-all.js）。如果要使用 css 版本，则fa-layers在文件夹结构中的任何地方都看不到类（在当前版本 5.0.8 中）。是否可以在 FA 5 的 css 版本中使用 fa-layers？

通过 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 版本。

4

2 回答 2

6

不，带有 CSS 的 Webfonts 不具备带有 JS 的 SVG 的所有功能。How to Use SVG with JS页面展示了 SVG with JS的一些新特性或独有特性。层，特别是，对于带有 JS 的 SVG 来说是新的：

图层是将图标和文本在视觉上相互叠加的新方法，取代了我们的经典图标堆栈。

您仍然可以使用带有 CSS 的 Webfonts 中的堆栈来做一些有趣的事情：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>

但是堆栈绝对不如带有 Power Transforms 的 Layers 强大，后者仅在带有 JS 的 SVG 中可用。

于 2018-05-11T22:24:56.153 回答
4

我也更喜欢使用 Web Fonts 版本，主要是出于性能原因。我还想在fa-layers课堂上使用更高级的分层图标。

我在 CSS 中重新创建了一些fa-layers功能，并将样式表放到了GitHub 上。它不完美或不完整。我仍在努力，但它可能会帮助您获得一些缺少的功能，而无需从 Web 字体和 CSS 切换。

于 2018-10-02T17:54:32.717 回答