Font Awesome 5，为什么没有显示 CSS 内容？

Question

我正在尝试在 CSS 的内容中使用 FontAwesome。

它与图标的代码一起出现，而不是图标。我遵循了在线帮助，但仍然无法正常工作

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
}

.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

原文由 happycoding 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 JS+SVG 版本，请阅读： Font Awesome 5 在使用 JS+SVG 版本时显示空白方块

首先，您只需要在 head 标签中包含 Font Awesome 5 的 CSS 文件，使用：

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

或者在 CSS 文件中：

 @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

然后您需要更正 字体系列 和如下 内容：

 @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    font-size:40px;
}

 <i class="fp-prev"></i>

在某些情况下，您还必须添加

font-weight:900

更多细节在这里： 伪元素上的 Font Awesome 5 显示正方形而不是图标

---

作为旁注：Font Awesome 5 为每个图标包提供 4 种不同的 font-family ：

Font Awesome 5 Free 免费图标。

Font Awesome 5 Brands 用于 Facebook、Twitter 等品牌图标。

 @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
  color: #000;
  content: "\f099";
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

 <i class="fp-prev"></i>

Font Awesome 5 Pro 用于 Font Awesome Pro 。

Font Awesome 5 Duotone 也包含在 Pro 包中。

相关： Font Awesome 5 在伪元素中选择正确的字体系列

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

让你的 font-weight: 900; 。我看你想念它

原文由 Musfiq Shanta 发布，翻译遵循 CC BY-SA 4.0 许可协议