Iconfont-cainiao 图标

01运输中、物流-线性

.icon-yunshuzhongwuliu-xianxing
01运输中、物流

.icon-yunshuzhongwuliu
02包裹、发货

.icon-baoguofahuo
02包裹、发货-线性

.icon-baoguofahuo-xianxing
03拆包裹、取件

.icon-chaibaoguoqujian
03拆包裹、取件-线性

.icon-chaibaoguoqujian-xianxing
04自提柜

.icon-zitigui
04自提柜-线性

.icon-zitigui-xianxing
05采购-线性

.icon-caigou-xianxing
05采购

.icon-caigou
06商品

.icon-shangpin
06商品-线性

.icon-shangpin-xianxing
07配载、装车

.icon-peizaizhuangche
07配载、装车-线性

.icon-peizaizhuangche-xianxing
08质量-线性

.icon-zhiliang-xianxing
08质量

.icon-zhiliang
09安全、保障

.icon-anquanbaozhang
09安全、保障-线性

.icon-anquanbaozhang-xianxing
10仓库、仓储

.icon-cangkucangchu
10仓库、仓储-线性

.icon-cangkucangchu-xianxing
11中转站-线性

.icon-zhongzhuanzhan-xianxing
11中转站

.icon-zhongzhuanzhan
12库存-线性

.icon-kucun-xianxing
12库存

.icon-kucun
13末端网点-线性

.icon-moduanwangdian-xianxing
13末端网点

.icon-moduanwangdian
14签收、审批通过-线性

.icon-qianshoushenpitongguo-xianxing
14签收、审批通过

.icon-qianshoushenpitongguo
15拒签收-线性

.icon-juqianshou-xianxing
15拒签收

.icon-juqianshou
16寄件、发送-线性

.icon-jijianfasong-xianxing
16寄件、发送

.icon-jijianfasong
17企业、园区、物业

.icon-qiyeyuanquwuye
17企业、园区、物业-线性

.icon-qiyeyuanquwuye-xianxing
19结算-线性

.icon-jiesuan-xianxing
19结算

.icon-jiesuan
20积分

.icon-jifen
20积分-线性

.icon-jifen-xianxing
21优惠劵-线性

.icon-youhuijuan-xianxing
22资料、手册

.icon-ziliaoshouce
22资料、手册-线性

.icon-ziliaoshouce-xianxing
21优惠劵

.icon-youhuijuan
23规则

.icon-guize
25单据-线性

.icon-danju-xianxing
24组织架构、接口

.icon-zuzhijiagoujiekou
25单据

.icon-danju
26创建单据-线性

.icon-chuangjiandanju-xianxing
26创建单据

.icon-chuangjiandanju
27账单-线性

.icon-zhangdan-xianxing
27账单

.icon-zhangdan
28体积、空间

.icon-tijikongjian
28体积、空间-线性

.icon-tijikongjian-xianxing
29业务-线性

.icon-yewu-xianxing
29业务

.icon-yewu
30应用程序-线性

.icon-yingyongchengxu-xianxing
30应用程序

.icon-yingyongchengxu
31标准

.icon-biaozhun
31标准-线性

.icon-biaozhun-xianxing
32权限、钥匙

.icon-quanxianyuechi
32权限、钥匙-线性

.icon-quanxianyuechi-xianxing
33资源

.icon-ziyuan
33资源-线性

.icon-ziyuan-xianxing
34模板、框架-线性

.icon-mobankuangjia-xianxing
34模板、框架

.icon-mobankuangjia
35新闻、资讯

.icon-xinwenzixun
35新闻、资讯-线性

.icon-xinwenzixun-xianxing
36合作、关系-线性

.icon-hezuoguanxi-xianxing
36合作、关系

.icon-hezuoguanxi
36线路

.icon-xianlu
37-服务-线性

.icon--fuwu-xianxing
37-服务

.icon--fuwu
38-客服-线性

.icon--kefu-xianxing
38-客服

.icon--kefu
39-国际-线性

.icon--guoji-xianxing
39-国际

.icon--guoji
40海关-线性

.icon-haiguan-xianxing
40海关

.icon-haiguan
41头程、空运

.icon-touchengkongyun
42尾程

.icon-weicheng
43财务

.icon-caiwu
43财务-线性

.icon-caiwu-xianxing
46免费

.icon-mianfei
46免费-线性

.icon-mianfei-xianxing
47退款

.icon-tuikuan
49计算器、利率

.icon-jisuanqilishuai
49计算器、利率-线性

.icon-jisuanqilishuai-xianxing
201checkbox-未选

.icon-checkbox-weixuan
201checkbox-选中

.icon-checkbox-xuanzhong
202Raidobox-未选

.icon-Raidobox-weixuan
202Raidobox-选中

.icon-Raidobox-xuanzhong
201checkbox-选中部分

.icon-checkbox-xuanzhongbufen
203右下角勾选

.icon-youxiajiaogouxuan
206搜索-线性

.icon-sousuo-xianxing
205设置-线性

.icon-shezhi-xianxing
205设置

.icon-shezhi
204首页

.icon-shouye
204首页-线性

.icon-shouye-xianxing
206搜索

.icon-sousuo
207问题-线性

.icon-wenti-xianxing
207问题

.icon-wenti
209电话-线性圆框

.icon-dianhua-xianxingyuankuang
208聊天、对话

.icon-liaotianduihua
208聊天、对话-线性

.icon-liaotianduihua-xianxing
209电话

.icon-dianhua
209电话-圆框

.icon-dianhua-yuankuang
210信-线性

.icon-xin-xianxing
211铃铛

.icon-lingdang
211铃铛-线性

.icon-lingdang-xianxing
210信

.icon-xin
212喇叭-线性

.icon-laba-xianxing
212喇叭

.icon-laba
213麦克风-线性

.icon-maikefeng-xianxing
213收藏

.icon-shoucang
213麦克风

.icon-maikefeng
213喜欢-线性

.icon-xihuan-xianxing
213收藏-线性

.icon-shoucang-xianxing
213喜欢

.icon-xihuan
215更多-横向

.icon-gengduo-hengxiang
216更多-竖向

.icon-gengduo-shuxiang
217时间-线性

.icon-shijian-xianxing
214声波、语音消息

.icon-shengboyuyinxiaoxi
217时间

.icon-shijian
219上传、导出

.icon-shangchuandaochu
218下载、导入

.icon-xiazaidaoru
223保存-线性

.icon-baocun-xianxing
220闪光灯

.icon-shanguangdeng
222闪光灯-自动

.icon-shanguangdeng-zidong
221闪光灯-关闭

.icon-shanguangdeng-guanbi
223保存

.icon-baocun
224用户-线性

.icon-yonghu-xianxing
224用户

.icon-yonghu
226角色、群体

.icon-jiaosequnti
225默认头像

.icon-morentouxiang
227注册、添加好友

.icon-zhucetianjiahaoyou
228任务

.icon-renwu
229中文模式

.icon-zhongwenmoshi
231附件

.icon-fujian
232编辑、输入-线性

.icon-bianjishuru-xianxing
232编辑、输入

.icon-bianjishuru
230英文模式

.icon-yingwenmoshi
233键盘-线性

.icon-jianpan-xianxing
233键盘

.icon-jianpan
234日历

.icon-rili
236未出勤

.icon-weichuqin
235考勤、出勤

.icon-kaoqinchuqin
237拍照

.icon-paizhao
237拍照-线性

.icon-paizhao-xianxing
238图片-线性

.icon-tupian-xianxing
238图片

.icon-tupian
239扫描

.icon-saomiao
240显示、可见

.icon-xianshikejian
242锁定

.icon-suoding
241隐藏、不可见

.icon-yincangbukejian
243解锁

.icon-jiesuo
244安装、施工-线性

.icon-anzhuangshigong-xianxing
245筛选过滤

.icon-shaixuanguolv
244安装、施工

.icon-anzhuangshigong
246注销、关机

.icon-zhuxiaoguanji
247好评-圆框

.icon-haoping-yuankuang
248差评-圆框

.icon-chaping-yuankuang
248差评

.icon-chaping
247好评

.icon-haoping
250一般

.icon-yiban
249满意

.icon-manyi
251不满意

.icon-bumanyi
253列表视图、菜单

.icon-liebiaoshitucaidan
252宫格视图

.icon-gonggeshitu
255Phone手机

.icon-Phoneshouji
254PC台式机

.icon-PCtaishiji
256PDA手持工作设备

.icon-PDAshouchigongzuoshebei
301加-方框

.icon-jia-fangkuang
301加-线性方框

.icon-jia-xianxingfangkuang
301加-线性圆框

.icon-jia-xianxingyuankuang
301加-圆框

.icon-jia-yuankuang
302减-方框

.icon-jian-fangkuang
301加

.icon-jia
302减-圆框

.icon-jian-yuankuang
302减

.icon-jian
302减-线性方框

.icon-jian-xianxingfangkuang
303正确、完成-线性圆框

.icon-zhengquewancheng-xianxingyuankuang
303正确、完成-圆框

.icon-zhengquewancheng-yuankuang
303正确、完成

.icon-zhengquewancheng
302减-线性圆框

.icon-jian-xianxingyuankuang
304错误、关闭、取消-线性方框

.icon-cuowuguanbiquxiao-xianxingfangkuang
304错误、关闭、取消-圆框

.icon-cuowuguanbiquxiao-yuankuang
304错误、关闭、取消-线性圆框

.icon-cuowuguanbiquxiao-xianxingyuankuang
304错误、关闭、取消

.icon-cuowuguanbiquxiao
304错误、关闭、取消-方框

.icon-cuowuguanbiquxiao-fangkuang
305信息-线性圆框

.icon-xinxi-xianxingyuankuang
305信息

.icon-xinxi
306问号-线性圆框

.icon-wenhao-xianxingyuankuang
306问号

.icon-wenhao
306问号-圆框

.icon-wenhao-yuankuang
305信息-圆框

.icon-xinxi-yuankuang
307感叹号-三角框

.icon-gantanhao-sanjiaokuang
307感叹号-圆框

.icon-gantanhao-yuankuang
307感叹号-线性圆框

.icon-gantanhao-xianxingyuankuang
307感叹号-线性三角框

.icon-gantanhao-xianxingsanjiaokuang
307感叹号

.icon-gantanhao
308上一页、后退、返回-线性圆框

.icon-shangyiyehoutuifanhui-xianxingyuankuang
308上一页、后退、返回-圆框

.icon-shangyiyehoutuifanhui-yuankuang
309下一页、前进、查看更多-线性圆框

.icon-xiayiyeqianjinchakangengduo-xianxingyuankuang
309下一页、前进、查看更多-圆框

.icon-xiayiyeqianjinchakangengduo-yuankuang
308上一页、后退、返回

.icon-shangyiyehoutuifanhui
309下一页、前进、查看更多

.icon-xiayiyeqianjinchakangengduo
310向下、展开-线性圆框

.icon-xiangxiazhankai-xianxingyuankuang
310向下、展开-圆框

.icon-xiangxiazhankai-yuankuang
310向下、展开

.icon-xiangxiazhankai
311向上、收起-圆框

.icon-xiangshangshouqi-yuankuang
311向上、收起-线性圆框

.icon-xiangshangshouqi-xianxingyuankuang
312指向左

.icon-zhixiangzuo
313指向右

.icon-zhixiangyou
315指向上

.icon-zhixiangshang
311向上、收起

.icon-xiangshangshouqi
314指向下

.icon-zhixiangxia
316第一页

.icon-diyiye
317最后页

.icon-zuihouye
319表头-正序

.icon-biaotou-zhengxu
318表头-可排序

.icon-biaotou-kepaixu
320表头-倒序

.icon-biaotou-daoxu
321 回顶部

.icon-huidingbu
323向左交换

.icon-xiangzuojiaohuan
322相互交换

.icon-xianghujiaohuan
324向右交换

.icon-xiangyoujiaohuan
326数值下降

.icon-shuzhixiajiang
327全屏

.icon-quanping
329横向展开

.icon-hengxiangzhankai
325数值上升

.icon-shuzhishangsheng
328退出全屏

.icon-tuichuquanping
330横向收起

.icon-hengxiangshouqi
331刷新

.icon-shuaxin
332同步

.icon-tongbu
333加载loading-A

.icon-jiazailoading-A
333加载loading-B

.icon-jiazailoading-B
401位置-线性

.icon-weizhi-xianxing
401位置

.icon-weizhi
402导航

.icon-daohang
404定位

.icon-dingwei
404监控、摄像头-线性

.icon-jiankongshexiangtou-xianxing
403拓点图

.icon-tuodiantu
404监控、摄像头

.icon-jiankongshexiangtou
405雷达、探测

.icon-leidatance
406报表

.icon-baobiao
407饼图-线性

.icon-bingtu-xianxing
406报表-线性

.icon-baobiao-xianxing
407饼图

.icon-bingtu
408条形图

.icon-tiaoxingtu
408条形图-线性

.icon-tiaoxingtu-xianxing
409折线图

.icon-zhexiantu
409折线图-线性

.icon-zhexiantu-xianxing
410指南、指导-线性

.icon-zhinanzhidao-xianxing
411地图

.icon-ditu
410指南、指导

.icon-zhinanzhidao
902投诉

.icon-tousu
901巡检、检验

.icon-xunjianjianyan
50店铺

.icon-dianpu
50店铺-线性

.icon-dianpu-xianxing
51快递员

.icon-kuaidiyuan
51快递员-线性

.icon-kuaidiyuan-xianxing
44贷款-线性

.icon-daikuan-xianxing
45还款-线性

.icon-huankuan-xianxing
47退款-细

.icon-tuikuan-xi
234日历-线性-细

.icon-rili-xianxing-xi
49计算器、利率-线性-细

.icon-jisuanqilishuai-xianxing-xi
257用户资料

.icon-yonghuziliao
257用户资料-线性

.icon-yonghuziliao-xianxing
258皮肤&主题

.icon-pifuzhuti
258皮肤&主题-线性

.icon-pifuzhuti-xianxing
259钻石

.icon-diamond
259钻石-线性

.icon-diamond-o
54设计-线性

.icon-sheji-xianxing
55开发-线性

.icon-kaifa-xianxing
48银行卡

.icon-yinhangqia
48银行卡-线性

.icon-yinhangqia-xianxing
52红包-线性

.icon-hongbao-xianxing
52红包

.icon-hongbao

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont-cainiao.css">

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont-cainiao icon-xxx"></i>

"iconfont-cainiao"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont-cainiao"。