IconFont 图标
-
time#icon-time
-
filter#icon-filter
-
recharge#icon-recharge
-
时间#icon-shijian
-
会员卡#icon-huiyuanqia
-
电话#icon-msnui-telephone
-
火车#icon-huoche
-
降落#icon-jiangluo
-
起飞#icon-qifei
-
切换#icon-switch
-
疑问#icon-yiwen
-
android#icon-android
-
plane#icon-plane
-
plane_fill#icon-planefill
-
iphone#icon-iphone
-
休息区#icon-xiuxiqu
-
零食#icon-lingshi
-
定位#icon-dingwei
-
iOS#icon-ios
-
兑换码-icon#icon-duihuanmaicon
-
选中#icon-xuanzhong
-
行李_f#icon-xinglif
-
密码#icon-mima
-
关闭1#icon-guanbi1
-
标星-fill#icon-biaoxingfill
-
标星#icon-biaoxing
-
分享#icon-fenxiang1
-
时钟#icon-shizhong
-
喜欢#icon-xihuan2
-
向上1#icon-xiangshang1
-
向下1#icon-xiangxia1
-
相机1-fill#icon-xiangji1fill
-
相机1#icon-xiangji1
-
相机2#icon-xiangji2
-
刷新#icon-shuaxin
-
用户-fill#icon-yonghufill
-
用户#icon-yonghu
-
Android更多#icon-androidgengduo
-
专车#icon-icon
-
始发站#icon-shifazhan
-
终点站#icon-zhongdianzhan
-
设置#icon-shezhi
-
YDUI-感叹号(实心)#icon-gantanhao
-
提醒#icon-tixing1
-
完成#icon-wancheng
-
休息室#icon-Lounge
-
高铁#icon-gaotie
-
日历#icon-rili
-
user#icon-user
-
160. Drinks#icon-160drinks
-
tv#icon-tv
-
验证码#icon-yanzhengma
-
乘客#icon-chengke
-
目的地#icon-mudedi
-
安全#icon-pro
-
接机服务icon#icon-jiejifuwuicon
-
微博#icon-weibo
-
television#icon-television
-
wifi路由#icon-iconset0265
-
减#icon-jian
-
更多#icon-gengduo
-
开关#icon-kaiguan
-
筛选#icon-shaixuan
-
提醒#icon-tixing
-
添加#icon-tianjia
-
搜索#icon-sousuo1
-
右箭头#icon-youjiantou
-
左箭头#icon-zuojiantou
-
收藏#icon-shoucang1
-
列表#icon-liebiao
-
上#icon-shang
-
下#icon-xia
-
左#icon-zuo
-
接机服务6#icon-jiejifuwu
-
微信#icon-weixin
-
地点#icon-didian
-
星级_1#icon-xingji_
-
星级_2#icon-xingji_1
-
plane1#icon-plane1
-
vip#icon-vip
-
飞机#icon-feiji2
-
注销#icon-zhuxiao2
-
星级_3#icon-xingji_2
-
优惠券#icon-youhuiquan1
-
全程代办服务#icon-quanchengdaibanfuwu
-
admin#icon-admin
-
paper-plane#icon-paper-plane
-
游客端我的-我关注的导游#icon-youkeduanwode-woguanzhudedaoyou
-
隐藏#icon-act_content_hide
-
完成#icon-wancheng2
-
密码#icon-mima1
-
发票#icon-icon-test
-
右#icon-you
-
拍照#icon-paizhao
-
航班#icon-hangban
-
飞机#icon-feiji1
-
QQ#icon-qq
-
paper-plane#icon-paper-plane1
-
客服#icon-kefu1
-
日历#icon-weibiaoti-_fuzhi
-
comment_friends#icon-comment_friends
-
coordinates#icon-coordinates
-
enter#icon-enter
-
homepage_fill#icon-homepage_fill
-
homepage#icon-homepage
-
interactive_fill#icon-interactive_fill
-
interactive#icon-interactive
-
label#icon-label
-
label_fill#icon-label_fill
-
message#icon-message
-
message_fill#icon-message_fill
-
offline#icon-offline
-
people_fill#icon-people_fill
-
people#icon-people
-
picture#icon-picture
-
praise_fill#icon-praise_fill
-
praise#icon-praise
-
return#icon-return
-
success_fill#icon-success_fill
-
success#icon-success
-
喜欢2#icon-xihuan
-
喜欢#icon-xihuan1
-
订单 待付款#icon-dingdandaifukuan
-
订单集合#icon-dingdanjihe
-
购物#icon-gouwu
-
头像#icon-touxiang
-
icon_parking#icon-icon_parking
-
账户安全#icon-tubiaozhizuomoban
-
packup#icon-packup
-
信用卡#icon-xinyongqia
-
支付宝#icon-zhifubao
-
沙发#icon-shafa
-
完成#icon-wancheng1
-
个人信息#icon-gerenxinxi
-
显示#icon-xianshi
-
微信支付#icon-weixinzhifu
-
关闭#icon-guanbi
-
业务#icon-yewu
-
到达#icon-daoda
-
computer#icon-computer
-
返程#icon-fancheng
-
去程#icon-qucheng
-
分享#icon-fenxiang
-
播放#icon-bofang
-
客服#icon-kefu
-
身份证#icon-shenfenzheng
-
全屏#icon-quanping
-
说明#icon-shuoming
-
暂停#icon-zanting
-
收藏#icon-shoucang
-
扫一扫#icon-saoyisao
-
我的#icon-wode
-
首页#icon-shouye
-
分类#icon-fenlei
-
消息#icon-xiaoxi
-
发现#icon-faxian
-
搜索#icon-sousuo
-
浏览#icon-liulan
-
置顶#icon-zhiding
-
观演人#icon-guanyanren
-
订阅#icon-dingyue
-
地址管理#icon-dizhiguanli
-
待付款#icon-daifukuan
-
待收货#icon-daishouhuo
-
会员#icon-huiyuan
-
未使用#icon-weishiyong
-
评价#icon-pingjia
-
签到#icon-qiandao
-
转出#icon-zhuanchu
-
转入#icon-zhuanru
-
管家#icon-guanjia
-
airplane_train#icon-airplane_train
-
航班预定#icon-hangbanyuding
-
列车时刻#icon-liecheshike
-
常用购票人/编辑32#icon-changyonggoupiaorenbianji
-
删除#icon-changyonggoupiaorenshanchu
-
订单#icon-dingdan
-
优惠券#icon-youhuiquan
-
提示说明#icon-tishishuoming
-
飞机#icon-feiji
-
版本信息 版本 提示 信息 说明#icon-banbenxinxibanbentishixinxishuoming
-
休息室#icon-xiuxishi
-
快速通道#icon-kuaisutongdao
-
银联#icon-pay-unionpay
-
公交换乘#icon-iconfont0
-
优惠券#icon-lingquanzhongxin
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>