页面新增iconfont图标,超详细版

需求:项目原先有个字体图标库,需要新增一些字体图标

1.首先打开iconfont字体图标库
网址:https://www.iconfont.cn/
页面新增iconfont图标,超详细版
2.可以在右上角框框里面搜索想要的图标
搜索之后可以看到有282个关于“应用”的字体图标,选择想要的加到购物车里
页面新增iconfont图标,超详细版
3.点击购物车里面的下载至本地,会下载一个包,文件目录如下:页面新增iconfont图标,超详细版
有用的是这四个
页面新增iconfont图标,超详细版
4.为了防止与源文件冲突,将这四个文件重新命名一下,再导入到项目中
命名之后:
页面新增iconfont图标,超详细版
项目原先的配置及新加的配置
页面新增iconfont图标,超详细版
5.最后一步,将iconfont.css文件夹里面的@font-face 拷贝到项目当中的iconfont.css内
有两个是正常的哦~一定要有这一步,要不字体图标不会显示
页面新增iconfont图标,超详细版