IconFont 图标
-
活动优先#icon-huodongyouxian
-
精选市场#icon-jingxuanshichang
-
输入#icon-shuru
-
天猫提示-疑问#icon-yiwen
-
分类#icon-fenlei
-
产品参数#icon-chanpincanshu
-
分享#icon-fenxiang
-
分类#icon-fenlei1
-
关注店铺#icon-guanzhudianpu
-
已关注#icon-yiguanzhu
-
店铺#icon-dianpu
-
关注#icon-guanzhu
-
我#icon-wo
-
优惠券#icon-youhuiquan
-
表情#icon-biaoqing
-
功能建议#icon-gongnengjianyi
-
换一批#icon-huanyipi
-
声波#icon-shengbo
-
问题反馈#icon-wentifankui
-
信息#icon-xinxi
-
赞#icon-zan
-
朋友圈#icon-pengyouquan
-
新浪#icon-xinlang
-
微信#icon-weixin
-
密码#icon-mima
-
二维码#icon-erweima
-
链接#icon-lianjie
-
点赞#icon-dianzan
-
收藏-选中#icon-shoucangxuanzhong
-
收藏#icon-shoucang
-
范兜儿#icon-fandouer
-
电话#icon-dianhua
-
排行#icon-paixing
-
关于我#icon-guanyuwo
-
查看#icon-chakan
-
删除#icon-shanchu
-
帮助#icon-bangzhu
-
积分#icon-jifen
-
红包#icon-hongbao
-
退款#icon-tuikuan
-
红包#icon-tuikuan1
-
Message#icon-xiaoxi
-
share#icon-fenxiang1
-
cart#icon-cart
-
home#icon-home
-
Camera#icon-camera
-
Attention#icon-attention
-
refresh#icon-shuaxin
-
查看2#icon-chakan2
-
加#icon-jia
-
减#icon-jian
-
扫码#icon-iconfontscan
-
全部订单#icon-quanbudingdan
-
设置#icon-shezhi
-
我的资产#icon-wodezichan
-
3.1收藏-选中#icon-31shoucangxuanzhong
-
3.1收藏#icon-31shoucang
-
3.1关闭#icon-31guanbi
-
3.1选择#icon-31xuanze
-
3.1关注店铺#icon-31guanzhudianpu
-
3.1选中#icon-31xuanzhong
-
3.1已关注店铺#icon-31yiguanzhudianpu
-
3.1点赞#icon-31dianzan
-
3.1店铺#icon-31dianpu
-
3.1分享#icon-31fenxiang
-
3.1转发#icon-31zhuanfa
-
3.1待发货#icon-31daifahuo
-
3.1待付款#icon-31daifukuan
-
3.1待收货#icon-31daishouhuo
-
3.1待评价#icon-31daipingjia
-
3.1退款退货#icon-tuikuantuihuo
-
3.1会员卡#icon-31huiyuanqia
-
3.1积分#icon-31jifen
-
3.1优惠券#icon-31youhuiquan
-
3.1首页-选中#icon-31shouyexuanzhong
-
礼物 活动#icon-liwuhuodong
-
3.1-范兜#icon-31fandou
-
3.1-剪裁#icon-31jiancai
-
查看#icon-chakan1
-
关闭#icon-guanbi
-
关注#icon-guanzhu1
-
火热#icon-huore
-
喇叭#icon-laba
-
3.1铃铛#icon-lingdang
-
3.1-汽车金融#icon-31qichejinrong
-
3.1-热销#icon-31rexiao
-
3.1-刷新#icon-31shuaxin
-
3.1-消息#icon-31xiaoxi
-
3.1-疑问#icon-31yiwen
-
3.1产品参数#icon-31chanpincanshu
-
3.1订单#icon-31dingdan
-
3.1定位#icon-31dingwei
-
3.1删除#icon-31shanchu
-
3.1足迹#icon-31zuji
-
3.1优惠券#icon-31hongbao
-
3.1类目#icon-31leimu
-
3.1列表#icon-31liebiao
-
3.1图文详情#icon-31tuwenxiangqing
-
3.1 保存到桌面#icon-31baocundaozhuomian
-
3.1 二维码#icon-31erweima
-
编辑#icon-bianji
-
3.1 评论#icon-31pinglun
-
3.1 签到#icon-31qiandao
-
3.1 全部商品#icon-31quanbushangpin
-
3.1 设置#icon-31shezhi
-
3.1提示#icon-31tishi
-
3.1-汽车金融#icon-31qichejinrong1
-
3.1 好友#icon-31haoyou
-
3.1-订阅#icon-dingyue
-
售后服务#icon-shouhoufuwu
-
3.1-爱车估价#icon-31aichegujia
-
3.1-搭配#icon-31dapei
-
3.1-魔搭#icon-31moda
-
3.1-排行榜#icon-31paixingbang
-
3.1-违章快查#icon-31weizhangkuaicha
-
3.1-品牌#icon-31pinpai
-
3.1-客服#icon-kefu
-
他们都用过#icon-tamenduyongguo
-
天猫国际-折扣标.#icon-tianmaoguojizhekoubiao
-
支付宝#icon-zhifubao
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>