1.图标字体简介
-
图标字体(iconfont)
在网页中经常需要使用一些图标,可以通过图片来引入图标,但是图片大小本身比较大,并且非常的不灵活
所以在使用图标时,可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入,这样就可以通过使用字体的形式来使用图标 -
fontawesome使用步骤
①下载https://fontawesome.com/
②解压
③将css和webfonts移动到项目中
④将all.css引入到网页中
⑤使用图标字体
直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
2.通过伪元素来设置图标字体
①找到要设置图标的元素通过before或after选中
②在content中设置字体的编码
③设置字体的样式
fab
font-family:‘Font Awesome 5 Brands’;
fas
font-family:‘Font Awesome 5Free’;
font-weight:900;
3.通过实体来使用图标字体
&#x图标的编码;