Font Awesome 5，为什么CSS内容没有显示? [英] Font Awesome 5, why is css content not showing?

问题描述

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

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

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

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

推荐答案

^{如果使用的是 JS + SVG版本，请阅读:}

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

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

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

<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 和内容:

Then you need to correct the font-family and the content like 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;
    font-size:40px;
}

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

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

In some cases, you have to also add

此处有更多详细信息:伪元素上的字体真棒5显示正方形而不是图标

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

请注意:Font Awesome 5为每个图标包提供4种不同的font-family:

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

Font Awesome 5 Free以获得免费图标.

Font Awesome 5 Brands用于Facebook，Twitter等品牌图标.

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

@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 5 Duotone也包含在Pro软件包中.

Font Awesome 5 Duotone also included in the Pro package.

相关:字体很棒5在伪元素中选择正确的字体系列

这篇关于Font Awesome 5，为什么CSS内容没有显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！