阿里巴巴图标的应用

Posted 2021-01-12 butterflyeffect

今天研究阿里巴巴图标应用，发现阿里巴巴图标有三百多万个......

网址：http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

下面介绍两种方式应用图标至网站中
1.文件下载保存项目应用法
做法:
先通过搜索框搜索自己需求的图标,点击图标中的购物车加入到购物车中

如下图下载压缩包至本地

解压后发现里面的文件如图

值得注意的是红色框的五个文件，unicode.html里面可以查看到图标的unicode编码，svg和css是图标的样式文件，eot、ttf和woff文件是系统生成的文件，需要将这五个文件放到项目中去应用使用即可
ps:这种方法每次增加新图标时候，文件大小会变大，也就意味着每次新增图标都要修改这五个文件，而这五个文件也是下载的压缩包解压出来的，缺一不可！！！

总结:此方法不是很好的管理项目图标，因为每次添加新图标的时候，五个文件都需要更新.....这就要求做项目时事先把所有的需求图标都罗列进文件里面去！

2.添加至项目应用法
做法:
在自己账号里面新建一个项目，如下图，将选好的图标添加至项目中

点击更新代码，将代码复制替换到iconfont.css文件中去，更改iconfont 为 layui-icon保存

在需要应用图标的地方写上图标unicode即可:

ps:这种方法性能不是很好，因为是通过URL去获取阿里巴巴文件配置中的图标，也有可能阿里巴巴服务器也受影响，不是很稳定！！！

总结:此方法可用需慎用！