从 font-awesome v4 到 v5答案

【问题标题】：going from font-awesome v4 to v5从 font-awesome v4 到 v5
【发布时间】：2019-10-18 17:43:44
【问题描述】：

我已经使用some responsive template 有一段时间了，但想将其 fa 模块从 v4 升级到 v5。在下载the free web package 并将“font-awesome.min.css”与“all.min.css”交换并调整所有对新字体文件夹的引用后，我可以将所有新的fa-icons 与"<span class="fa fa-..."></span>" 一起使用（或远， fas，以 fab 为前缀）。很好。

我无法正常工作的是使用具有其他样式的 v5 图标，例如 class="icon ..." 或 class="feature ..."。
当我明确设置时，只显示 v5 实体系列 .icon:before { ... font-weight: 900; ... } 或 .feature:before { ... font-weight: 900; ... }。其他 2 个系列的图标显示为一个方框，仅显示图标的十六进制代码。
当我将权重设置为“400”时，仅显示来自 v5 常规系列的图标，而实心图标显示为带有十六进制代码的正方形。无论我设置什么重量，v5 品牌家族的图标都不会出现。
那么如何访问品牌系列或所有 3 个系列的图标？
感谢您的任何提示...

【问题讨论】：

标签： html css class font-awesome responsive

【解决方案1】：

基本上你需要告诉浏览器你想使用哪个 Font Awesome 系列。就像您希望 Arial 与 Times 在您的网站上显示文本一样。

在你的代码块中你应该说：

.icon:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

对于 Font Awesome，font-family 和 font-weight 的组合会产生不同的外观。

真正的问题是您使用的是免费版本的 FA，它通过指定 900 重量和 400 重量仅包括“实心”和“品牌”样式。您要求的功能是专业版的一部分。

这里是 FA's Documentation 讨论这个问题。

【讨论】：

谢谢布莱斯。实际上，免费版本包括所有 3 种样式，但感谢您的提示，我重新阅读了我的 CSS 代码并注意到“brands”样式的字体系列名称是“Font Awesome 5 Brands”。因此，除了 400 的重量，所有 fa-brands 图标都可用。带有“Font Awesome 5 Free”和重量为 400 的所有 fa-regular 和重量为 900 的所有 fa-solid 图标。太好了。
很高兴它成功了！我有点希望每种样式都只是一个不同的字体包，这会使它更容易。虽然我很惊讶他们的文档离我这么远。