在我们写网站的前端页面的时候,图标的出现频率会特别的高,图标的处理也比较的繁琐,下面我就讲讲我处理图标的过渡史
过渡一:作为一个切图仔,会头疼项目中的小的图标,一开始是一个个切出来,比如这样(两种状态,还得切两张图。。。):
图标img
过渡二:然后,出了个优化方案,是把所有的图标都拼在一起,然后要用的时候,再一个个的从图片里截取,我就想问这样拼图标,然后再截图标,然后截出来的图标还不太好控制大小,我就想问你不累么 不累么!!!!
过渡三:最后发现阿里巴巴矢量图标库可以快速生成iconfont 用起来特别方便,再也不用我一个个扣小图标了,引用下图标字体文件就可以轻松搞定
1.进入阿里巴巴矢量图标库网站,将需要的图标添加至我的项目
2.打开我的项目,点击下载至本地
3.解压下载的文件
解压目录
4.打开html,就可以查看图标对应的引用class名称,以及对应的图标引用方式
,
5. 再根据html的引用方法引用图标,就可以轻松运用图标了
demo代码
小图标出现啦