从 font-awesome v4 到 v5

Question

我一直在使用 some responsive template for a while now but would like to upgrade its fa-module from v4 to v5. after downloading 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 的组合，产生了不同的外观。

真正的问题是您使用的是 free 版本的 FA，它通过指定 900 权重仅包含 "solid" 和 "Brands" 样式和400重量。您要求的功能是专业版的一部分。

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

从 font-awesome v4 到 v5

going from font-awesome v4 to v5

html

css

class

font-awesome

responsive