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
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./iconfont.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>