为了账号安全,请及时绑定邮箱和手机立即绑定

Font Awesome 5,为什么CSS内容没有显示?

Font Awesome 5,为什么CSS内容没有显示?

动漫人物 2019-12-06 10:42:47
我正在尝试在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;}
查看完整描述

3 回答

?
阿晨1998

TA贡献2037条经验 获得超6个赞

如果您使用的是JS + SVG版本,请阅读以下内容:使用JS + SVG版本时,Font Awesome 5显示空白


首先,您只需使用以下命令在head标签中包含Font Awesome 5的CSS文件:


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

或在CSS文件中:


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

然后,您需要更正字体系列和内容,如下所示:


@import url("https://use.fontawesome.com/releases/v5.8.1/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>

附带说明:Font Awesome 5 font-family为每包图标提供3种不同的显示方式:

Font Awesome 5 Free 免费图标。

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

@import url("https://use.fontawesome.com/releases/v5.8.1/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 for the Font Awesome Pro


In some cases, you have to adjust the value of the font-weight like detailed here: Font Awesome 5 on pseudo elements shows square instead of icon


查看完整回答
反对 回复 2019-12-06
?
ibeautiful

TA贡献1993条经验 获得超5个赞

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


查看完整回答
反对 回复 2019-12-06
  • 3 回答
  • 0 关注
  • 962 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信