iconfont使用，亲测

iconfont对于前端应用来讲有不少便捷：

一、自由变化大小

二、自由修改颜色

三、能够添加一些视觉效果如：阴影、旋转、透明度。

四、兼容IE6

在线引用和下载到本地两种方法

一。在线引用

图标的制做和上传能够参照官网给出的文档： Page 1

图标的下载和使用官网上说的不是很清楚，简单介绍下：

1.首先在 Iconfont-阿里巴巴矢量图标库(微博登陆)上面将你须要的图标点击购物车按钮加入“暂存架”

2.选择完全部要用的图标后“存储为项目”，给它命名。而后在“图标管理”-“图标应用项目”中找到这个项目，获取在线连接，把里面的代码复制到CSS中。

3.在HTML中须要使用到图标时，使用iconfont类名。

<i class="iconfont">&#xe600;</i> 

里面写上你想用的图标下面的Unicode：

4.而后你能够经过控制iconfont类的属性改变图标的样式，好比：

.iconfont{ font-family:"iconfont"; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; padding-left:20px } 

就能够在页面中引用和修改了。

官网中还列出了使用时候的兼容性问题及其解决方法： Page 2

原文：做者-班星灿

连接：http://www.zhihu.com/question/25952487/answer/71917554
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

 

2、放到暂存架后，点击"下载到本地",xx.zip文件。按照demo.html文件说明进行设置

 

我再IEtester测试ie6,ie7,ie8,ie9,ie9图标右侧有方块，按上面page2说的加display：block；无论事。ie7不显示图标（在线和本地），在电脑浏览器ie9.0.8中也不显示

能够把这两个结合，给她加个class，控制颜色大小等。好比我作的极速电脑的那个图标