Font Awesome 5 (with CSS) fa-layers答案

【问题标题】：Font Awesome 5 (with CSS) fa-layersFont Awesome 5 (with CSS) fa-layers
【发布时间】：2018-03-22 09:14:22
【问题描述】：

我从 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 版本的所有功能，我想要我们的 css 版本的 FA 5。

【问题讨论】：

标签： font-awesome-5

【解决方案1】：

不，带有 CSS 的 Webfonts 不具备带有 JS 的 SVG 的所有功能。 How to Use SVG with JS 页面显示了 SVG with JS 的一些新特性或独有特性。 Layers，具体来说，是带有 JS 的 SVG 的新手：

图层是将图标和文本直观地放置在每个图层之上的新方法其他，替换我们的经典图标堆栈。

您仍然可以在带有 CSS 的 Webfonts 中使用堆栈来做一些有趣的事情：codepen example

<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 中可用。

【讨论】：

【解决方案2】：

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

我在 CSS 中重新创建了一些 fa-layers 功能并将样式表放入 up on GitHub。它不完美或不完整。我仍在努力，但它可能会帮助您在不离开 Web 字体和 CSS 的情况下获得一些缺失的功能。

【讨论】：