IconFont 图标
-
微信#icon-weixin
-
排序#icon-paixu
-
电话#icon-dianhua
-
银行卡#icon-yinxingqia
-
车票#icon-chepiao
-
列表#icon-liebiao
-
电话#icon-dianhua1
-
问号#icon-14052218
-
订单#icon-order
-
通知#icon-tongzhi
-
电话#icon-dianhua2
-
预订#icon-yuding
-
航班#icon-hangban
-
用户#icon-101
-
日历#icon-rili
-
邮件#icon-youjian
-
哭脸#icon-kulian
-
时间#icon-shijian
-
火车#icon-huoche
-
报销#icon-baoxiao
-
删除#icon-shanchu
-
编码#icon-bianma
-
向上#icon-iconfontup2
-
向下#icon-iconfontdown2
-
减号#icon-jianhao
-
E#icon-letter-e
-
酒店#icon-jiudian
-
飞机#icon-feiji
-
二维码#icon-erweima
-
向下#icon-icon123
-
电话#icon-dianhua3
-
图片#icon-tupian
-
笑脸#icon-xiaolian
-
热门#icon-remen
-
附件#icon-fujian
-
订单#icon-dingdan
-
修改#icon-xiugai
-
时间#icon-shijian2
-
买车#icon-maiche
-
手机#icon-shouji
-
物品领用申请#icon-wupinlingyongshenqing
-
chair-b#icon-chair-b
-
放大镜#icon-fangdajing
-
设置#icon-set
-
二维码#icon-erweima2
-
行程#icon-importedlayers
-
旅游#icon-lvyou
-
笑脸#icon-xiaolian1
-
手机#icon-shouji1
-
评价#icon-pingjia
-
对勾#icon-duigou
-
行程#icon-xingcheng
-
叉叉#icon-chacha
-
位置#icon-weizhi
-
旅游#icon-lvyou1
-
预订#icon-yuding11
-
添加#icon-icontianjia01
-
放大镜#icon-fangdajing1
-
对勾#icon-duigou1
-
粗版2_时间预订成功#icon-cuban2shijianyudingchenggong
-
交通#icon-jiaotong
-
换一换#icon-huanyihuan
-
时间#icon-shijian11
-
座位#icon-zuowei
-
坐标#icon-zuobiao
-
住宿#icon-iconfontchuang
-
头像#icon-touxiang
-
推荐#icon-icon05
-
价格#icon-icon06
-
我的订单#icon-wodedingdan
-
航班动态#icon-icon
-
手机#icon-shouji2
-
手机#icon-shouji3
-
对勾#icon-duigou2
-
飞机#icon-feiji1
-
延期uAddtime#icon-yanqiuaddtime
-
往返#icon-icon11
-
语言#icon-yuyan
-
成功#icon-chenggong
-
添加#icon-15
-
快钱#icon-kuaiqian
-
我的预订#icon-wodeyuding
-
选择#icon-xuanze
-
前往#icon-qianwang
-
通知#icon-notice
-
状态#icon-zhuangtai
-
ios#icon-ios
-
地球#icon-diqiu
-
back#icon-back
-
机票车票#icon-jipiaochepiao
-
对勾#icon-duigou3
-
旅游#icon-lvyou2
-
客服#icon-htmal5icon31
-
查天气#icon-chatianqi
-
时间#icon-shijian21
-
文件夹#icon-wenjianjia
-
删除#icon-shanchu1
-
商圈#icon-shangquan
-
手势#icon-touch
-
线下门店#icon-store
-
向下#icon-xiangxia
-
审批#icon-shenpi
-
审批#icon-shenpi1
-
其他#icon-qita
-
钱袋#icon-qiandai
-
显示#icon-xianshi
-
订单#icon-dingdan1
-
火车(1)#icon-huoche1
-
二维码#icon-erweima1
-
座位数#icon-zuoweishu
-
单程#icon-eg
-
CN-longhubang#icon-cnlonghubang
-
地图#icon-map
-
酒店#icon-jiudian1
-
筛选#icon-shaixuan
-
住宿#icon-zhusu
-
授权#icon-shouquan
-
关于#icon-guanyu
-
飞机#icon-feiji11
-
预订#icon-yuding2
-
通知#icon-tongzhi1
-
暂停#icon-zanting
-
通知#icon-tongzhi2
-
叹号#icon-information
-
支付宝#icon-zhifubao
-
轮船#icon-lunchuan
-
电脑#icon-diannao
-
个人#icon-geren
-
餐饮#icon-canyin
-
日历#icon-rili1
-
审批#icon-shenpi2
-
客服#icon-1
-
note#icon-note
-
空心圆#icon-kongxinyuan
-
提交订单#icon-tijiao1
-
道路旅客运输#icon-daolulvkeyunshu
-
叉叉#icon-chacha1
-
时间#icon-shijian1
-
意见反馈#icon-yijianfankui
-
旅游线路#icon-lvyouxianlu
-
点#icon-dian
-
酒店#icon-jiudian2
-
验证码#icon-yanzhengma
-
审核中#icon-xingzhuang1
-
业务_business140#icon-yewubusiness140
-
客车#icon-keche
-
周边up#icon-zhoubianup
-
向下#icon-xiangxia1
-
订单审批#icon-dingdanshengpi
-
行程#icon-xingcheng1
-
状态#icon-zhuangtai11
-
球票#icon-qiupiao
-
钥匙#icon-yaochi
-
火车#icon-huoche2
-
任务结果#icon-renwujieguo
-
提交#icon-tijiao
-
换一换#icon-huanyihuan1
-
广发#icon-guangfa
-
短信#icon-sms
-
简介#icon-intro3
-
安卓#icon-anzhuo-copy
-
信息#icon-12zhengqiuyijian
-
变更#icon-biangeng
-
飞机#icon-feiji-copy
-
导入#icon-daoru
-
导入#icon-daoru1
-
汽车#icon-qiche
-
叹号#icon-tanhao
-
飞机#icon-feiji-big
-
等待#icon-dengdai
-
修改#icon-xiugai1
-
套票#icon-taopiao
-
电脑#icon-diannao1
-
天气_风暴#icon-tianqifengbao
-
到达#icon-daoda
-
首页1#icon-shouye1
-
首页2#icon-shouye2
-
信息2#icon-xinxi2
-
信息1#icon-xinxi1
-
我的2#icon-wode2
-
我的1#icon-wode1
-
助手2#icon-zhushou2
-
助手1#icon-zhushou1
-
设置2#icon-shezhi2
-
设置1#icon-shezhi1
-
旅游 (3)#icon-lvyou3
-
起飞#icon-qifei
-
快钱-支付#icon-kuaiqianzhifu
-
转换中#icon-zhuanhuanzhong
-
禁止#icon-jinzhi
-
天气#icon-tianqi
-
火车#icon-huoche111
-
距离#icon-juli
-
设施_客厅#icon-sheshiketing
-
火车#icon-huoche31
-
搜索行政区#icon-sousuoxingzhengqu
-
飞机-横#icon-feiji-heng
-
附件#icon-fujian2
-
升序#icon-shengxu
-
降序#icon-jiangxu
-
竖线#icon-shuxian
-
横杠#icon-arrow-cross
-
转换#icon-zhuanhuan
-
对勾#icon-yes
-
车次中心#icon-checizhongxin
-
暂无消息#icon-zanwuxiaoxi
-
2#icon-icon-test
-
1#icon-icon-test1
-
右#icon-you
-
左#icon-zuo
-
选择#icon-xuanze1
-
支付-微信#icon-pay-wechat
-
火车换向#icon-huochehuanxiang
-
私人出行#icon-sirenchuhang
-
公务出行#icon-gongwuchuhang
-
weather1#icon-weather1
-
weather3#icon-weather3
-
weather0#icon-weather0
-
weather4#icon-weather4
-
weather5#icon-weather5
-
weather6#icon-weather6
-
weather2#icon-weather2
-
weather9#icon-weather9
-
weather7#icon-weather7
-
weather8#icon-weather8
-
weather10#icon-weather10
-
weather11#icon-weather11
-
weather12#icon-weather12
-
weather15#icon-weather15
-
weather13#icon-weather13
-
weather16#icon-weather16
-
weather14#icon-weather14
-
weather17#icon-weather17
-
weather18#icon-weather18
-
weather19#icon-weather19
-
weather20#icon-weather20
-
weather24#icon-weather24
-
weather22#icon-weather22
-
weather21#icon-weather21
-
weather26#icon-weather26
-
weather25#icon-weather25
-
weather23#icon-weather23
-
weather27#icon-weather27
-
weather28#icon-weather28
-
weather30#icon-weather30
-
weather31#icon-weather31
-
weather32#icon-weather32
-
weather34#icon-weather34
-
weather33#icon-weather33
-
weather37#icon-weather37
-
weather36#icon-weather36
-
weather29#icon-weather29
-
weather35#icon-weather35
-
weather99#icon-weather99
-
weather38#icon-weather38
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>