IconFont 图标
-
notification_fill#icon-notificationfill
-
notification#icon-notification
-
more#icon-more
-
lock#icon-lock
-
mobile_fill#icon-mobilefill
-
creative_fill#icon-creativefill
-
creative#icon-creative
-
rank_fill#icon-rankfill
-
支付宝钱包#icon-rectangle390
-
余额宝#icon-icon
-
转账#icon-zhuanzhang
-
信用卡还款#icon-xinyongqiahuankuan
-
当面付#icon-dangmianfu
-
水电煤#icon-shuidianmei
-
手机充值#icon-shoujichongzhi
-
亲密付#icon-qinmifu
-
股票#icon-gupiao
-
游戏充值#icon-youxichongzhi
-
收款#icon-shoukuan
-
机票#icon-jipiao
-
汇率换算#icon-huilvhuansuan
-
记账本#icon-jizhang
-
旅游特惠#icon-lvyoutehui
-
快递#icon-kuaidi
-
话费卡转让#icon-huafeiqiazhuanrang
-
手机宝令#icon-shoujibaoling
-
钱包朋友#icon-qianbaopengyou
-
快抢#icon-kuaiqiang
-
随身贷#icon-suishendai
-
我的保障#icon-wodebaozhang
-
会员特权#icon-huiyuantequan
-
成功#icon-chenggong
-
失败#icon-shibai
-
警示#icon-jingshi
-
提示#icon-tishi
-
帮助#icon-bangzhu
-
等待#icon-dengdai
-
相机#icon-xiangji
-
手机通讯录#icon-shoujitongxunlu
-
我的#icon-wode
-
搜索#icon-sousuo
-
地图#icon-ditu
-
扫一扫#icon-saoyisao
-
付款码#icon-fukuanma
-
城市服务#icon-chengshifuwu
-
教育缴费#icon-jiaoyujiaofei
-
一般#icon-yiban
-
社交#icon-shejiao
-
通讯#icon-tongxun
-
数码#icon-shuma
-
学习#icon-xuexi
-
礼物#icon-liwu
-
还款#icon-huankuan
-
理财#icon-licai
-
工资#icon-gongzi
-
兼职#icon-jianzhi
-
理财收益#icon-licaishouyi
-
其他收入#icon-qitashouru
-
添加类目#icon-tianjialeimu
-
财富A#icon-caifua
-
财富B#icon-caifub
-
paint_fill#icon-paintfill
-
paint#icon-paint
-
people_fill#icon-peoplefill
-
people#icon-people
-
repair#icon-repair
-
repair_fill#icon-repairfill
-
command_fill#icon-commandfill
-
command#icon-command
-
community_fill#icon-communityfill
-
community#icon-community
-
sponsor_fill#icon-sponsorfill
-
sponsor#icon-sponsor
-
单选-fill#icon-danxuanfill
-
单选#icon-danxuan
-
方形未选中#icon-fangxingweixuanzhong
-
方形选中-fill#icon-fangxingxuanzhongfill
-
方形选中#icon-fangxingxuanzhong
-
关闭1#icon-guanbi1
-
关闭2-fill#icon-guanbi2fill
-
关闭2#icon-guanbi2
-
加号#icon-jiahao
-
加号1#icon-jiahao1
-
加号2-fill#icon-jiahao2fill
-
减号#icon-jianhao
-
提示-fill#icon-tishifill
-
提示#icon-tishi1
-
问号-fill#icon-wenhaofill
-
问号#icon-wenhao
-
选择#icon-xuanze
-
圆形未选中#icon-yuanxingweixuanzhong
-
圆形选中-fill#icon-yuanxingxuanzhongfill
-
圆形选中#icon-yuanxingxuanzhong
-
标星-fill#icon-biaoxingfill
-
标星#icon-biaoxing
-
店铺-fill#icon-dianpufill
-
店铺#icon-dianpu
-
分享#icon-fenxiang
-
更多#icon-gengduo
-
购物车-fill#icon-gouwuchefill
-
购物车#icon-gouwuche
-
留言-fill#icon-liuyanfill
-
留言#icon-liuyan
-
朋友-fill#icon-pengyoufill
-
朋友#icon-pengyou
-
扫码#icon-saoma
-
首页-fill#icon-shouyefill
-
首页#icon-shouye
-
通知-fill#icon-tongzhifill
-
通知#icon-tongzhi
-
我的-fill#icon-wodefill
-
我的#icon-wode1
-
信息-fill#icon-xinxifill
-
信息#icon-xinxi
-
足迹#icon-zuji
-
坐标-fill#icon-zuobiaofill
-
向右1#icon-xiangyou1
-
向左1#icon-xiangzuo1
-
相机1-fill#icon-xiangji1fill
-
相机1#icon-xiangji1
-
相机2#icon-xiangji2
-
加载#icon-jiazai
-
刷新#icon-shuaxin
-
wifi#icon-wifi
-
Android更多#icon-androidgengduo
-
类目#icon-leimu
-
单品#icon-danpin
-
居家#icon-jujia
-
品牌#icon-pinpai
-
特权专属#icon-tequanzhuanshu
-
箱包#icon-xiangbao
-
goods_new_fill#icon-goodsnewfill
-
goods_new#icon-goodsnew
-
news_hot_fill#icon-newshotfill
-
news_hot#icon-newshot
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>