http://www.iconfont.cn/阿里巴巴矢量图标地址
之前培训UI视觉设计课程的时候，web和手机端的图标一般都是自己去画的，这样效率不高。现在转为前端，一般很少自己去画图标了，如果框架有直接引用的话就直接引用，没有的话在阿里巴巴矢量图标库上面找，方便快捷，以后设计师就可以偷懒了
以前我都是直接下载过来用的，用png的格式，引用的时候直接用img去引用，直到一个学长告诉我，用png引用的方式对浏览器的渲染性能不好。所以我在官网上认真看了下
出現结构，加入购物车，放心不用付钱，都是免费的，然后在右上角的购物车选择”下载代码“
之后解压之后会看到
这么多到底该怎么用呢，在之前我用过，隔了一段时间之后，当我看到解压之后的文件时，当时的是懵的状态，所以这次写出来，也是为了加强记忆吧，省得以后还费时间去百度
三种引用方式
1、font-class的引用
恩这个呢，你点击解压之后的文件点击demo_fontclass就会显示步骤内容
但估计很多人会对第一步产生疑问，到底是哪个fontclass的代码呢，没错就是那个解压之后你可以看到iconfont.css的文件
2、symbol的引用，我一般用这种方式，因为支持多色，可以直接用字体属性的color去修改
3、Unicode的引用
注意的一点，自己要把用的图标加入到购物车
另外说一个favicon..ico的事情，最近团队做项目的时候，其主力要做做一个.ico的图标，当时的我还是懵的，一百度就知道了
那么怎么制作.ico的图标呢
可以导入自己的图片，一般那是32*32px的大小
引用的代码如下
主流浏览器都能支持这样的写法，但是普通的用户用的是搜狗、360等这样的浏览器，可能会出现一些兼容的问题
http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html这篇博客详细地介绍了favicon.ico在各浏览器产生差异的原因和解决办法，目前我还没有对favicon.ico的图标测试过，有时间亲测下，大家可以看下阿里巴巴矢量图标的三种引用方式和了解favicon.ico
