阿里巴巴图标的应用

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

网址: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去获取阿里巴巴文件配置中的图标,也有可能阿里巴巴服务器也受影响,不是很稳定!!!

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

原文地址:https://www.cnblogs.com/ButterflyEffect/p/9773698.html