FontAwesome css内容未显示

hap*_*ing 7 css pseudo-element font-awesome font-awesome-5

我试图在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;
}
Run Code Online (Sandbox Code Playgroud)

小智 21

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


Tem*_*fif 19

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
Run Code Online (Sandbox Code Playgroud)

或者在CSS文件中:

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css")
Run Code Online (Sandbox Code Playgroud)

然后你需要纠正font-family和这样的内容:

@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;
}
Run Code Online (Sandbox Code Playgroud)
<i class="fp-prev"></i>
Run Code Online (Sandbox Code Playgroud)

作为旁注: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;
}
Run Code Online (Sandbox Code Playgroud)
<i class="fp-prev"></i>
Run Code Online (Sandbox Code Playgroud)

Font Awesome 5 Pro对于Font Awesome Pro