IconFont 图标
-
bbg_清洁#icon-bbgqingji
-
赞#icon-zan
-
服务#icon-fuwu
-
搜索#icon-sousuo
-
左边#icon-zuobian
-
生活缴费#icon-shenghuojiaofei
-
绿叶#icon-lvye
-
对#icon-dui
-
手机#icon-shouji
-
更多#icon-androidmorevertical
-
登录#icon-denglu
-
我的#icon-wode
-
垃圾桶#icon-lajitong
-
new#icon-yuanjiaojuxing2
-
接待#icon-jiedai
-
家政#icon-jiazheng
-
更多#icon-gengduo
-
服务#icon-fuwu1
-
下拉向下#icon-xialaxiangxia
-
城市#icon-chengshi
-
公共信息#icon-icon17
-
维修#icon-weixiu
-
呼叫语音#icon-hujiaoyuyin
-
消息推送#icon-zhengguiicon40
-
钩钩#icon-gougou
-
发帖子#icon-fatiezi
-
商务服务#icon-shangwufuwu
-
温泉养生#icon-wenquanyangsheng
-
向下#icon-xiangxia
-
我的#icon-wode1
-
修改密码#icon-xiugaimima
-
地址#icon-dizhi
-
活动#icon-huodong
-
版本更新#icon-banbengengxin
-
向上#icon-xiangshang
-
伤心#icon-shangxin
-
绑定银行卡#icon-binding-bank
-
微信支付2#icon-weixinzhifu2
-
客房#icon-bedroomTest
-
app论坛#icon-appluntan
-
客服#icon-666
-
删除#icon-shanchu
-
小区#icon-xiaoqu
-
电视机-0#icon-dianshiji0
-
五角星#icon-wujiaoxing
-
公告#icon-gonggao
-
左边箭号#icon-zuobianjianhao
-
物业信息#icon-96
-
订单#icon-dingdan
-
圈子#icon-quanzi
-
定位#icon-dingwei
-
订单#icon-dingdan1
-
记录#icon-jilu
-
丽人#icon-liren
-
验证码#icon-yanzhengma
-
评分-星-全#icon-pingfenxingquan
-
钩#icon-gou
-
差差#icon-chacha-copy
-
订单#icon-dingdan2
-
广告#icon-guanggao
-
分类#icon-icon
-
赞赞#icon-zanzan-copy
-
太阳#icon-fengshui
-
缴费记录#icon-1
-
系统#icon-xitong
-
投诉建议#icon-wodetousu
-
V#icon-v
-
弹出评论#icon-comiisdanchupinglun
-
桶装水#icon-louxiatongzhuangshui
-
团购#icon-tuangou
-
汽车美容#icon-qichemeirong
-
室内装修#icon-bedroom
-
投诉建议#icon-8
-
租房11#icon-wodezufang
-
服务保障#icon-fuwubaozhang
-
敬请期待#icon-jingqingqidai
-
敬请期待#icon-jingqingqidai1
-
洗衣#icon-icon1
-
邮件#icon-youjian
-
快递#icon-kuaidi
-
出行#icon-chuhang
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>