字体真棒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

---

作为旁注：Awesome Font 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

Answer 2

制作您的font-weight: 900;。我看到你想念它

Answer 3

这也发生在我身上。我曾经使用过这个图标：就像使用字体真棒5 CDN。

但是当我尝试选择相同的类然后编辑图标时，没有在图标上进行css编辑。

因此从css选择器上的“ .fas fa-plus-square”中删除了“ fas”，并将其设置为“ .fa-plus-square {}”。

所以CSS对我来说是这样的：

.fa-plus-square{
    float: right;
}

我删除了“ fas”。它对我有用。

Html类为<i class="fas fa-plus-square"></i>的地方

以及我使用的CDN：“ https://use.fontawesome.com/releases/v5.0.7/css/all.css”。希望这对您有帮助

Answer 4

[当您想包含FontAwesome时，您提供的URL应该作为head文件放在stylesheet标记内：

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

然后，您可以像完成操作一样使用Font Awesome。

Answer 5

我知道我真的来晚了。但是被接受的答案并没有帮助我。经过研究后，我发现了这一点。

您必须在标题中包含Fontawesome CSS。

CDN-

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

如果您已下载源文件，则包括以下内容

<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />

稍后您必须按如下所示添加CSS-

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* replace / with \ */
    font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
}

如果您希望通过<i>标签添加它，则可以遵循

<i class="fas fa-arrow-alt-circle-right"></i>

确保您的字体粗细为900。

Refer-https://github.com/FortAwesome/Font-Awesome/issues/11946

[在GitHub上提出了同样的问题。他们建议对于纯字体真棒图标，font-weight应该为900。

希望这对您有帮助。