html - 从 font-awesome v4 到 v5

Question

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

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

Answer 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 权重仅包含“solid”和“Brands”样式。您请求的功能是专业版的一部分。

这是 FA's Documentation关于这个问题。