一、引用Iconfont的意义
- 设计不用再切图了,更不需要针对不同场景切出大小、颜色、格式等不同的图片,只需维护一个图标项目库即可。
- 开发者也不用引用大量图片,也不需要在js中根据不同场景切换不同图片,仅class名就可搞定,修改灵活。尤其在node开发中,节省大量代码,提高可维护性。
- 字体图标缩放不失真,不会变模糊。
- 减少网络请求次数,一个css文件可包含所有图标。
- 节约流量,图标是图片格式,每个几K到几十K,而css文件一般一共只有几K
二、引用Iconfont流程
1. UI上传/自行上传到Iconfont.cn项目中www.iconfont.cn/
因iconfont原因,如有色图标超过40时请拆分iconfont项目。
2. 将项目下载至本地,整理下载的解压包,按下图放入项目assets文件中
如有多个图标项目导入同一开发项目时,导出至本地时请注意FontFamily命名唯一性,该问题可能导致图标错乱。
3. 在入口文件中进行配置
例如nuxt中需从nuxt.config,.js中进行配置,不同的框架会有不同的区别,请自行查找相关配置信息,有多少个图标项目配置多少个文件即可。