Font Awesome 5 页面引入和使用方法_stylesheet all.min.css

最近在写新的主题，将iconfont图标切换为Font Awesome 5的，切换的原因主要是，方便别人二次开发好找图标，下面说一下，这个图标的具体的用法。

css引用

掌握一种即可，需要另外一种的时候在研究，我这里使用的是css的引用，下载后找到 all.css，或者 all.min.css 建议正式环境引用all.mim.css

<link rel="stylesheet" href="all.min.css">
1

使用方法

在需要用图标的地方加入 <i class=”fas fa-camera”> 即可，当然也可以用 em

支持调整大小

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
1
2
3
4
5
6
7
8

伪类的使用

好多时候需要使用伪类 ::before 和 ::after，这个时候使用图标需要用下面的方法

a:before {
font-family: "Font Awesome 5 Free";
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
1
2
3
4
5
6
7
8

特别注意的是 font-weight:900 必须有，否则图标不显示。

欢迎关注我的公众号“xx主题网”，原创技术文章第一时间推送。

文章来源：https://www.xxzhuti.com/873.html

---