IconFont 图标
-
天猫派对#icon-tianmaopaidui
-
客服优先#icon-kefuyouxian
-
列表#icon-liebiao
-
充值#icon-chongzhi
-
咖啡#icon-kafei
-
药品#icon-yaopin
-
汉堡#icon-hanbao
-
口红#icon-kouhong
-
图书#icon-tushu
-
手机#icon-shouji
-
列表#icon-liebiao1
-
购物车满#icon-gouwucheman
-
皇冠#icon-huangguan
-
出租#icon-chuzu
-
鞋\箱包#icon-xiexiangbao
-
精选市场#icon-jingxuanshichang
-
珠宝饰品#icon-zhubaoshipin
-
数码手机#icon-shumashouji
-
鞋/包#icon-xiebao
-
汽车配件#icon-qichepeijian
-
天猫形象1#icon-tianmaoxingxiang1
-
天猫形象2#icon-tianmaoxingxiang2
-
切换器右#icon-qiehuanqiyou
-
切换器左#icon-qiehuanqizuo
-
切换器(上)#icon-qiehuanqishang
-
地区浮层进入梁饭团按钮#icon-diqufucengjinruliangfantuananniu
-
地区下拉箭头#icon-diquxialajiantou
-
电梯类目#icon-diantileimu
-
回流区进口食品#icon-huiliuqujinkoushipin
-
箭头粗#icon-jiantoucu
-
箭头细#icon-jiantouxi
-
家居用品#icon-jiajuyongpin
-
我的资产#icon-wodezichan
-
品牌#icon-pinpai
-
天猫超市-购物车#icon-tianmaochaoshigouwuche
-
换一批#icon-huanyipi
-
小箭头#icon-xiaojiantou
-
加#icon-jia
-
已关注#icon-yiguanzhu
-
未关注#icon-weiguanzhu
-
天猫提示-疑问#icon-yiwen
-
天猫提示-出错#icon-chucuo
-
天猫提示-警示#icon-jingshi
-
天猫提示-正确#icon-zhengque
-
品牌专享#icon-pinpaizhuanxiang
-
天猫公告#icon-gonggao
-
天猫-极速退款#icon-tianmaojisutuikuan
-
天猫-七天退货#icon-tianmaoqitiantuihuo
-
我#icon-wo
-
表情#icon-biaoqing
-
功能建议#icon-gongnengjianyi
-
换一批#icon-huanyipi1
-
声波#icon-shengbo
-
持平#icon-chiping
-
下降#icon-xiajiang
-
进入店铺#icon-jinrudianpu
-
朋友圈#icon-pengyouquan
-
新浪#icon-xinlang
-
微信#icon-weixin
-
密码#icon-mima
-
二维码#icon-erweima
-
链接#icon-lianjie
-
点赞#icon-dianzan
-
返回8#icon-fanhui8
-
返回7#icon-fanhui7
-
返回6#icon-fanhui6
-
返回5#icon-fanhui5
-
更多#icon-gengduo
-
收藏-选中#icon-shoucangxuanzhong
-
收藏#icon-shoucang
-
返回1#icon-fanhui1
-
返回2#icon-fanhui2
-
返回3#icon-fanhui3
-
返回4#icon-fanhui4
-
淘#icon-tao
-
猫#icon-mao
-
未选中圆圈#icon-weixuanzhongyuanquan
-
删除2#icon-shanchu2
-
电话#icon-dianhua
-
回到顶部#icon-huidaodingbu
-
购物车-选中#icon-gouwuchexuanzhong
-
我的-选中#icon-wodexuanzhong
-
拍摄-选中#icon-paishexuanzhong
-
关于我#icon-guanyuwo
-
search#icon-fenxiang
-
cart#icon-cart
-
home#icon-home
-
home2#icon-home2
-
search#icon-search
-
refresh#icon-shuaxin
-
mine#icon-mine
-
mine2#icon-mine2
-
查看2#icon-chakan2
-
扫码#icon-iconfontscan
-
设置#icon-shezhi
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>