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)
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
| 归档时间: |
|
| 查看次数: |
22205 次 |
| 最近记录: |