css - 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;
}

Answer 1

^{如果您使用的是JS+SVG 版本，请阅读:Font Awesome 5 shows empty square when using the JS+SVG version}

首先，您只需要在 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")

然后您需要更正font-family 和content，如下所示:

@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 on pseudo elements shows square instead of icon

---

附带说明: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 Choosing the correct font-family in pseudo-elements