IconFont 图标
-
搜索#icon-sousuo
-
购物车#icon-shoppingcart
-
发送#icon-fasong
-
加#icon-jiajian02
-
拍照#icon-paizhao
-
发现#icon-faxian
-
换一换#icon-huanyihuan
-
收藏#icon-shoucang
-
付款方式#icon-fukuanfangshi
-
游戏#icon-94
-
位置#icon-icon2
-
评论#icon-Comment
-
个人中心#icon-gerenzhongxin
-
三个点#icon-sangedian
-
时钟#icon-shizhong
-
返回#icon-fanhui
-
点击#icon-dianji
-
我#icon-iconfontwohover
-
粗版_加到桌面#icon-cubanjiadaozhuomian
-
scanning#icon-scanning
-
关闭#icon-guanbi
-
评论#icon-pinglun
-
语音#icon-icon1
-
键盘#icon-jianpan
-
赞#icon-zan
-
行业走势#icon-xingyezoushi
-
艾特#icon-aite
-
全部#icon-quanbu
-
预约记录#icon-yuyuejilu
-
开奖公告#icon-kaijianggonggao
-
女#icon-nv
-
注意#icon-zhuyi
-
删除#icon-shanchu
-
公众号#icon-gongzhonghao
-
添加朋友#icon-icon
-
使用帮助#icon-shiyongbangzhu
-
文章#icon-wenzhang
-
空间#icon-kongjian-copy
-
邮件#icon-youjian
-
二维码#icon-erweima-copy
-
单品销售走势#icon-danpinxiaoshouzoushi
-
首页_首页#icon-shouyeshouye
-
发现#icon-faxian1
-
黑名单#icon-heimingdan
-
通讯录#icon-tongxunlu
-
安全中心#icon-security
-
-_校园通讯录#icon-xiaoyuantongxunlu
-
就诊卡管理_图片icon#icon-jiuzhenqiaguanlitupianicon
-
我的医生#icon-wodeyisheng
-
语音#icon-yuyin
-
我的#icon-wode
-
我的#icon-wode-copy
-
菜单#icon-caidan
-
微信#icon-weixin
-
表情#icon-biaoqing
-
统计图#icon-tongjitu
-
耳朵#icon-erduo
-
加#icon-jia
-
修改#icon-xiugai
-
订阅#icon-dingyue
-
通讯录#icon-tongxunlu1
-
客户管理_记录_备注icon#icon-kehuguanli_jilu_beizhuicon-
-
加图#icon-jiatu
-
通讯录#icon-tongxunlu2
-
谁可以看-01#icon-shuikeyikan-
-
钟#icon-zhong
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>