图标库Font Awesome使用方法

Font Awesome使用方法

fontawesome使用步骤
1.下载https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"

通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式

li::before{

content : '\f1b0';

font-family: 'Font Awesome 5 Free';

font-weight: 900;

}

或通过实体使用图标字体;

<span class= "fas">&#xf0f3;</span>
posted @ 2021-12-09 15:36  苏槿年  阅读(2150)  评论(0编辑  收藏  举报