使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔
阿里巴巴矢量库地址:http://www.iconfont.cn/plus
阿里巴巴矢量库图标好处:
1:图标矢量化
2:自己总结:iconfont是将图标按字体的方式进行操作,所以称为字体图标,我们可以用CSS来灵活控制图标的大小、颜色、阴影等。
3:通过iconfont平台,我们可以高效快速的生产出规范的图标。
4:流量最小化。
缺点:
1:色调单一,如果图标是五颜六色的,那么iconfont不适合。最多只能用CSS3做一些简单的渐变,或者你可以蛋疼的用多个图标叠加到一起。
使用步骤:
1:进入iconfont官网:http://www.iconfont.cn/plus
2:搜索目标图标,放入"购物车",完毕后,添加入项目中(需要登录),没有项目创建即可
3:选择:"Unicode4”,然后下载至本地
4:解压下载后的压缩包,打开,复制后缀名为:eot,svg,ttf,woff的文件到项目中,
5:打开html文件,按照其中步骤,复制1,2步骤的内容到项目的css中(.iconfont中内容的按照需求更改和添加)
6:修改路径:将css中@font-face种URL的路径改为对应格式文件路径
7:body中在想要图标的地方加入:<i class="iconfont"></i>,类名为iconfont,内容为图片的名字
8:打开网页,刷新即可看到矢量字体图标。
PS:2017-3-13:这次试用iconfnts中,发现控制台会报错,但不知道怎么解决,但是谷歌会照常显示,火狐浏览器不会正常显示。