CSS Font Awesome 5，为什么css内容不显示？

Font Awesome 5, why css content is not showing?

提问by happycoding

I am trying to use FontAwesome in the content of css.

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

It appears with the code for the icon instead of the icon. I have followed the online helps but still not working

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

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

回答by Temani Afif

^{If you are using the JS+SVG versionRead this: Font Awesome 5 shows empty square when using the JS+SVG version}

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

First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:

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

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

Or within the CSS file:

或者在 CSS 文件中：

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

Then you need to correct the font-familyand the contentlike below:

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

@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;
    text-decoration: inherit;
}

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

In some cases, you have to also add

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

font-weight:900

font-weight:900

More detail here: Font Awesome 5 on pseudo elements shows square instead of icon

此处有更多详细信息：伪元素上的 Font Awesome 5 显示方形而不是图标

---

---

As a side note: Font Awesome 5 provide 4 different font-familyfor each pack of icons:

附带说明：Font Awesome 5font-family为每个图标包提供 4 种不同的图标：

Font Awesome 5 Freefor the free icons.

Font Awesome 5 Free对于免费图标。

Font Awesome 5 Brandsfor the brand icons like Facebook, Twitter, etc.

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 Profor the Font Awesome Pro.

Font Awesome 5 Pro对于Font Awesome Pro。

Font Awesome 5 Duotonealso included in the Pro package.

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

Related: Font Awesome 5 Choosing the correct font-family in pseudo-elements

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

回答by Musfiq Shanta

Make your font-weight: 900;. I see you miss it

使您的font-weight: 900;. 我看你想念它

回答by Prottay Rudra

This Happened to me too. I had used this icon: as was using font awesome 5 cdn.

这也发生在我身上。我曾经使用过这个图标：就像使用 font awesome 5 cdn 一样。

But when I tried to select the same class and then edit the icon, the css editing didn't run on the icon.

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

So the removed the "fas" from ".fas fa-plus-square" on the css selector and made it ".fa-plus-square{}".

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

So the CSS was like this (for me) : .fa-plus-square{ float: right; }where i removed the "fas". And it worked for me.

所以 CSS 是这样的（对我来说）：.fa-plus-square{ float: right; }我删除了“fas”。它对我有用。

where the Html class was <i class="fas fa-plus-square"></i>

Html 类在哪里 <i class="fas fa-plus-square"></i>

And the cdn that I used: "https://use.fontawesome.com/releases/v5.0.7/css/all.css". Hope this helps you

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

回答by Gobbin

When you want to include FontAwesome the url you provided should be inside theheadtag as a stylesheetfile:

当您想包含 FontAwesome 时，您提供的 url 应该head作为stylesheet文件位于标签内：

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

Then you can use Font Awesome as you have done.

然后，您可以像以前一样使用 Font Awesome。

回答by BEingprabhU

I know I'm really late to answer this. But the accepted answer didn't help me. After making a bit of research I found this.

我知道我回答这个真的晚了。但是接受的答案对我没有帮助。经过一番研究，我发现了这一点。

You have to include Fontawesome CSS in the header.

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

CDN -

CDN -

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

If you have downloaded the source files then include as follows

如果您已经下载了源文件，则包括如下

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

Later you have to add the CSS as follows -

稍后您必须按如下方式添加 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;
}

if you wish to add it via <i>tag then you can follow

如果你想通过<i>标签添加它，那么你可以关注

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

Make sure your font weight is 900.

确保您的字体粗细为 900。

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

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

An issue was raised in GitHub for the same. They have suggested that for the solid font awesome icons the font-weightshould be 900.

在 GitHub 中也提出了同样的问题。他们建议对于纯色字体真棒图标font-weight应该是900.

Hope this will help you all.

希望这对大家有帮助。