iconfont 入门级使用方法

iconfont :

what？

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师*调整与调用。

how？ 

首先，登录iconfont官网：http://www.iconfont.cn/  ；

然后， 搜索你需要的图标并加入购物车 ；

---

搜索你需要的图标并加入购物车

选好之后选择储存为新项目

---

以在线引用为例，点击存储为新项目：

---

点储存

生成在线链接

点生成在线链接

复制到CSS中

复制到你网页里的CSS中

当然也可以是style标签里面。

！！ 注意：在本地调试的时候（就是当你的浏览器网址是file协议开头的时候），url(//)里双斜杠之前记得加上https:，像这样url(https://at.alicdn.com...)，不然会用file协议访问链接，也就自然找不到了。

和本地使用一样

---

在css中定义一个class：

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
}

• 把刚刚@font-face里定义的字体用起来！

最后，在<i class="iconfont"></i>中添加相应的图标代码，eg:

  <i class="iconfont"></i>

！！注意：  每次购物车中更新图标后，也要同步更新项目中的代码。

参考：http://www.jianshu.com/p/9293f3bca2a3

http://www.iconfont.cn/help/detail?helptype=code