使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔

阿里巴巴矢量库地址: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”,然后下载至本地

阿里巴巴矢量库IconFont__使用小录-LMLPHP

4:解压下载后的压缩包,打开,复制后缀名为:eot,svg,ttf,woff的文件到项目中,阿里巴巴矢量库IconFont__使用小录-LMLPHP

5:打开html文件,按照其中步骤,复制1,2步骤的内容到项目的css中(.iconfont中内容的按照需求更改和添加)

阿里巴巴矢量库IconFont__使用小录-LMLPHP

6:修改路径:将css中@font-face种URL的路径改为对应格式文件路径

7:body中在想要图标的地方加入:<i class="iconfont"></i>,类名为iconfont,内容为图片的名字

阿里巴巴矢量库IconFont__使用小录-LMLPHP

8:打开网页,刷新即可看到矢量字体图标。

阿里巴巴矢量库IconFont__使用小录-LMLPHP

PS:2017-3-13:这次试用iconfnts中,发现控制台会报错,但不知道怎么解决,但是谷歌会照常显示,火狐浏览器不会正常显示。

05-15 12:35