IconFont 图标
-
check#icon-check
-
close#icon-close
-
back#icon-back
-
cascades#icon-cascades
-
more#icon-more
-
settings#icon-settings
-
question_fill#icon-questionfill
-
question#icon-question
-
pic#icon-pic
-
right#icon-right
-
home#icon-home
-
add#icon-add
-
fold#icon-fold
-
share#icon-share
-
sort#icon-sort
-
单选-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-tishi
-
问号-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-fankui
-
分享#icon-fenxiang
-
更多#icon-gengduo
-
攻略#icon-gonglve
-
卡片形式#icon-qiapianxingshi
-
留言-fill#icon-liuyanfill
-
留言#icon-liuyan
-
清除#icon-qingchu
-
扫码#icon-saoma
-
筛选#icon-shaixuan
-
删除#icon-shanchu
-
设置#icon-shezhi
-
身份#icon-shenfen
-
首页-fill#icon-shouyefill
-
首页#icon-shouye
-
搜索#icon-sousuo
-
通知-fill#icon-tongzhifill
-
通知#icon-tongzhi
-
我的-fill#icon-wodefill
-
我的#icon-wode
-
喜欢-fill#icon-xihuanfill
-
喜欢#icon-xihuan
-
信息-fill#icon-xinxifill
-
信息#icon-xinxi
-
语言#icon-yuyan
-
坐标-fill#icon-zuobiaofill
-
坐标#icon-zuobiao
-
底部#icon-dibu
-
顶部#icon-dingbu
-
向上1#icon-xiangshang1
-
向上2#icon-xiangshang2
-
向上3#icon-xiangshang3
-
向下1#icon-xiangxia1
-
向下2#icon-xiangxia2
-
向下3#icon-xiangxia3
-
向下5#icon-xiangxia5
-
向右1#icon-xiangyou1
-
向右2#icon-xiangyou2
-
向右3-fill#icon-xiangyou3fill
-
向右3#icon-xiangyou3
-
向左1#icon-xiangzuo1
-
向左2#icon-xiangzuo2
-
相机1#icon-xiangji1
-
相机2#icon-xiangji2
-
加载#icon-jiazai
-
刷新#icon-shuaxin
-
红包#icon-hongbao
-
信用卡#icon-xinyongqia
-
用户-fill#icon-yonghufill
-
用户#icon-yonghu
-
赠送#icon-zengsong
-
Android更多#icon-androidgengduo
-
类目#icon-leimu
-
帮助中心#icon-bangzhuzhongxin
-
菜单#icon-caidan
-
赞同-fill#icon-zantongfill
-
赞同#icon-zantong
-
向上4#icon-xiangshang4
-
向下4#icon-xiangxia4
-
电话#icon-dianhua
-
单品#icon-danpin
-
多种支付#icon-duozhongzhifu
-
二维码#icon-erweima
-
户外#icon-huwai
-
特权专属#icon-tequanzhuanshu
-
others#icon-others
-
skin_fill#icon-skinfill
-
global#icon-global
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>