字体图标

字体图标下载链接(https://www.iconfont.cn/)

详细步骤:

①百度搜索 iconfont
②通过素材库或搜索栏搜索你想添加的字体图标
③光标悬停至你需要的字体图标上后点击添加至购物车
④点击右上角购物车,选择添加至项目(没有项目的要新建项目)
⑤点击下载至本地并解压,将文件夹名称修改为iconfont放置在需要使用的文件夹的根目录备用

使用方法

unicode编码使用法

●link引入iconfont字体图标文件夹中的iconfont.css文件
●利用空标签(大部分都使用 i 标签)承接unicode编码内容
●声明字体图标库 font-family:iconfont
※注意: 字体图标的本质是文字,可进行font相关样式的编辑

Font-class类名使用法

●link引入iconfont字体图标文件夹中的iconfont.css文件
●通过标签承接字体图标
【类名】
第一个类名(固定的)：iconfont
第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
第三个类名: 设置css样式时使用自己起的第三个类名

搭配伪元素使用法

●link引入iconfont字体图标文件夹中的iconfont.css文件
●在伪元素标签的content内容中,填充该字体图标的Unicode编码,去掉前三个字符和末尾的分号,在最前面添加＼,并用单/双引号包裹,例如:content: "\e602";
※"＼"作用: 编译
●声明字体图标库 font-family:iconfont

在线引入字体图标法

●link引入font class链接代码，需在前面添加 http:
●承接字体图标的标签类名同上方Font-class类名使用法
※注意：由于该用法需联网使用，且可能发生链接失效等问题，一般不使用，了解即可

在线引入