IconFont 图标

右边

.icon-youbian
左边

.icon-zuobian
手机

.icon-msnui-tel
更换

.icon-genghuan
对

.icon-dui
秒表

.icon-miaobiao
定位

.icon-dingwei
下

.icon-xia
图片加载失败-02

.icon-img-shibai
车辆订单

.icon-cheliangdingdan
支付宝

.icon-zhifubao
搜索

.icon-sousuo2
提示

.icon-tishi
行驶里程

.icon-index-data-
错

.icon-cuo
日期

.icon-riqi
代金券

.icon-daijinquan
日历

.icon-rili
货品_f

.icon-huopin_f
信息

.icon-xinxi1
叹号

.icon-warning
二维码

.icon-erweima2
定位

.icon-dingwei2
12已结清

.icon-yijieqing
53二维码

.icon-erweima1
71收入

.icon-shouru
b95555

.icon-b95555
b95533

.icon-b95533
b95508

.icon-b95508
b11185

.icon-b11185
b95559

.icon-b95559
b95528

.icon-b95528
b95558

.icon-b95558
b95561

.icon-b95561
b95566

.icon-b95566
b95577

.icon-b95577
b95511

.icon-b95511
b95568

.icon-b95568
b95599

.icon-b95599
b95574

.icon-b95574
b95588

.icon-b95588
80握手

.icon-woshou
81接单

.icon-jiedan
78来回

.icon-laihui
82时间

.icon-shijian
04审核通过

.icon-shenhetongguo
01创建

.icon-chuangjian
06审核中

.icon-shenhezhong
05审核未通过

.icon-shenheweitongguo
03右

.icon-you
02返回

.icon-fanhui
09扫一扫

.icon-saoyisao
07添加

.icon-tianjia
10.6

.icon-icon-test
08搜索

.icon-sousuo
10设置

.icon-shezhi
11编辑

.icon-bianji
10.5二维码

.icon-erweima
13删除

.icon-shanchu
37错误

.icon-cuowu
46授信付

.icon-shouxinfu
45信息

.icon-xinxi
36成功

.icon-chenggong
63手机

.icon-shouji
47其它付

.icon-qitafu
15账户安全

.icon-zhanghuanquan
10.7联系

.icon-lianxi
33密码

.icon-mima
32手机号

.icon-shoujihao
34确认密码

.icon-querenmima
38关闭

.icon-guanbi
39新订单

.icon-xindingdan
35验证码

.icon-yanzhengma
41到货确认

.icon-daohuoqueren
48我的账户

.icon-wodezhanghu
42待确认

.icon-daiqueren
40在途状态

.icon-zaituzhuangtai
44全部

.icon-quanbu
49授信额度

.icon-shouxinedu
43回单确认

.icon-huidanqueren
50还款

.icon-huankuan
51客服

.icon-kefu
52余额

.icon-yue
64等级1

.icon-dengji
65等级0.5

.icon-dengji1
66等级0

.icon-dengji2
67*新订单

.icon-xindingdan1
70*待确认

.icon-daiqueren1
68*在途

.icon-zaitu1
69*到货确认

.icon-daohuoqueren1
72*全部

.icon-quanbu1
71*回单确认

.icon-huidanqueren1
车辆管理

.icon-cheliangguanli
上传

.icon-shangchuan1
成功

.icon-chenggong1
60认证企业

.icon-renzhengqiye1
61已认证

.icon-yirenzheng1
62未认证

.icon-weirenzheng1
承运2

.icon-chengyun
承运3

.icon-chengyun2
待支付2

.icon-daizhifu1
待支付3

.icon-daizhifu2
发运2

.icon-fayun
额外费用3

.icon-ewaifeiyong1
额外费用2

.icon-ewaifeiyong2
发运3

.icon-fayun2
司机2

.icon-siji1
司机3

.icon-siji2
我的3

.icon-wode
我的2

.icon-wode2
在途2

.icon-zaitu2
在途3

.icon-zaitu3
账户2

.icon-zhanghu1
账户3

.icon-zhanghu2
额外费用-o

.icon-ewaifeiyong-o
承运-o

.icon-chengyun-o
待支付-o

.icon-daizhifu-o
我的-o

.icon-wode-o
司机-o

.icon-siji-o
在途-o

.icon-zaitu-o
账户-o

.icon-zhanghu-o
发运-o

.icon-fayun-o
暂无订单

.icon-zanwudingdan
暂无订单 2

.icon-zanwudingdan1
企业默认头像

.icon-qiyemorentouxiang
企业员工

.icon-qiyeyuangong
11编辑

.icon-bianji1
11编辑

.icon-bianji2
承运商1

.icon-chengyunshang
承运商

.icon-chengyunshang1
车辆管理

.icon-cheliangguanli1
合作车源1

.icon-hezuocheyuan
车辆管理1

.icon-cheliangguanli2
合作车源

.icon-hezuocheyuan1
目的地1

.icon-mudedi
启运地

.icon-qiyundi
目的地

.icon-mudedi1
我的客户

.icon-wodekehu
银行卡1

.icon-yinhangqia
银行卡

.icon-yinhangqia1
启运地1

.icon-qiyundi1
我的客户1

.icon-wodekehu1
账户安全

.icon-zhanghuanquan1
账户安全1

.icon-zhanghuanquan2
自有车辆

.icon-ziyoucheliang
自有车辆1

.icon-ziyoucheliang1
我的账户1

.icon-wodezhanghu1
支付密码1

.icon-zhifumima
我的账户

.icon-wodezhanghu2
支付密码

.icon-zhifumima1
额外费用1

.icon-ewaifeiyong3
待支付1

.icon-daizhifu3
承运1

.icon-chengyun3
司机1

.icon-siji3
我的1

.icon-wode3
在途1

.icon-zaitu4
发运1

.icon-fayun3
账户1

.icon-zhanghu3
公告

.icon-gonggao
关闭

.icon-guanbi1
企业

.icon-gaiicon-
启运地目的地

.icon-qiyundimudedi
分享

.icon-fenxiang1
选中

.icon-xuanzhong
b11185

.icon-b
b95508

.icon-b1
b95559

.icon-b2
b95533

.icon-b3
b95558

.icon-b4
b95528

.icon-b5
b95561

.icon-b6
b95566

.icon-b7
b95555

.icon-b8
b95511

.icon-b9
b95568

.icon-b10
b95574

.icon-b11
b95588

.icon-b12
b95599

.icon-b13
b95577

.icon-b14
06审核中

.icon-shenhezhong-copy
默认方头像

.icon-morenfangtouxiang1
圆头像

.icon-yuantouxiang
表情

.icon-biaoqing
地址

.icon-dizhi
默认方头像1

.icon-morenfangtouxiang
71收入1

.icon-shouru1
85支出

.icon-zhichu
司机实名通过

.icon-sijishimingtongguo
司机实名未通过

.icon-sijishimingweitongguo
企业认证通过

.icon-qiyerenzhengtongguo
企业认证未通过

.icon-qiyerenzhengweitongguo
消息

.icon-xiaoxi
司机头像

.icon-sijitouxiang
司机圆头像

.icon-sijiyuantouxiang
司机方头像

.icon-sijifangtouxiang
线下还款

.icon-xianxiahuankuan
个人银联

.icon-gerenyinlian
余额

.icon-yue1
企业银联

.icon-qiyeyinlian
收起

.icon-shouqi
展开

.icon-zhankai
勾选

.icon-gouxuan
勾选-o

.icon-gouxuan-o
额度变更

.icon-edubiangeng
额度增加

.icon-eduzengjia
额度减少

.icon-edujianshao
71收入1

.icon-shouru2
85支出

.icon-zhichu1
分享

.icon-fenxiang
接单二维码

.icon-jiedanerweima
叹号

.icon-tanhao
企业员工默认圆头像

.icon-qiyeyuangongmorenyuantouxiang
企业员工默认头像

.icon-qiyeyuangongmorentouxiang
x

.icon-x
nothing

.icon-nothing
信息

.icon-tishi1
企业员工默认圆头像

.icon-qiyeyuangongmorenyuantouxiang1
目的地

.icon-mudedi2
启运地

.icon-qiyundi2
我的客户

.icon-wodekehu2
银行卡管理

.icon-yinhangqiaguanli
支付密码

.icon-zhifumima2
账户安全

.icon-zhanghuanquan3
金额

.icon-jine
定位

.icon-dingwei1
消息

.icon-xiaoxi1
还款

.icon-huankuan1
授信额度

.icon-shouxinedu1
我的账户

.icon-wodezhanghu3
联系

.icon-lianxi1
车辆管理

.icon-cheliangguanli3
合作车源

.icon-hezuocheyuan2
我的承运商

.icon-wodechengyunshang
其它银行

.icon-qitayinhang
b11185

.icon-b15
b95558

.icon-b16
b95555

.icon-b17
b95559

.icon-b18
b95533

.icon-b19
b95561

.icon-b20
b95508

.icon-b21
b95566

.icon-b22
b95577

.icon-b23
b95574

.icon-b25
b95588

.icon-b26
b95528

.icon-b27
b95599

.icon-b28
b95511

.icon-b29
还款

.icon-huankuan2
授信额度

.icon-shouxinedu2
我的账户

.icon-wodezhanghu4
放款记录

.icon-fangkuanjilu
待放款

.icon-daifangkuan
提示

.icon-tishi2
转线下

.icon-zhuanxianxia
已结清

.icon-yijieqing1
支付中

.icon-zhifuzhong
b95568

.icon-b30
73记录

.icon-jilu
订单号

.icon-dingdanhao
发包号

.icon-fabaohao
申请时间

.icon-shenqingshijian
放款时间

.icon-fangkuanshijian
还款单号

.icon-huankuandanhao
油品中心-o

.icon-youpinzhongxin-o
油品中心

.icon-youpinzhongxin
待放款

.icon-daifangkuan1
喇叭

.icon-laba
时间筛选

.icon-shijianshaixuan
提交成功

.icon-tijiaochenggong
编辑

.icon-bianji3
地址

.icon-dizhi1
联系人

.icon-lianxiren
座机

.icon-zuoji
下

.icon-shang-copy
授信额度02

.icon-shouxinedu3
授信受理中

.icon-shouxinshoulizhong
企业

.icon-qiye
地图

.icon-ditu
货品

.icon-huopin
勾选前

.icon-gouxuanqian
勾选后

.icon-gouxuanhou
勾选

.icon-gouxuan1
专票

.icon-zhuanpiao
普票

.icon-pupiao
普票单色

.icon-pupiaodanse
专票单色

.icon-zhuanpiaodanse
个人网银

.icon-gerenwangyin
企业网银

.icon-qiyewangyin
线下支付

.icon-xianxiazhifu
错误

.icon-cuowu1
消息

.icon-xiaoxi2
承运

.icon-chengyun1
批量确认到货

.icon-piliangquerendaohuo
消息

.icon-xiaoxi3
积分

.icon-jifen
首页

.icon-shouye
坐标

.icon-zuobiao
轨迹

.icon-guiji
接单二维码

.icon-jiedanerweima1
添加

.icon-tianjia1
起点终点

.icon-qidianzhongdian
起点

.icon-qidian
终点

.icon-zhongdian
终点

.icon-zhongdian1
起点

.icon-qidian1
勾选

.icon-gouxuan2

font-class引用

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

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

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

使用步骤如下：

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

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

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

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

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