iconfont的引用

130 阅读1分钟

一、引用Iconfont的意义

  1. 设计不用再切图了,更不需要针对不同场景切出大小、颜色、格式等不同的图片,只需维护一个图标项目库即可。
  2. 开发者也不用引用大量图片,也不需要在js中根据不同场景切换不同图片,仅class名就可搞定,修改灵活。尤其在node开发中,节省大量代码,提高可维护性。
  3. 字体图标缩放不失真,不会变模糊。
  4. 减少网络请求次数,一个css文件可包含所有图标。
  5. 节约流量,图标是图片格式,每个几K到几十K,而css文件一般一共只有几K

二、引用Iconfont流程

image.png

1. UI上传/自行上传到Iconfont.cn项目中www.iconfont.cn/

因iconfont原因,如有色图标超过40时请拆分iconfont项目。

2. 将项目下载至本地,整理下载的解压包,按下图放入项目assets文件中

如有多个图标项目导入同一开发项目时,导出至本地时请注意FontFamily命名唯一性,该问题可能导致图标错乱。

3. 在入口文件中进行配置

例如nuxt中需从nuxt.config,.js中进行配置,不同的框架会有不同的区别,请自行查找相关配置信息,有多少个图标项目配置多少个文件即可。

4. 在页面中使用i标签即可