IconFont 图标
-
自行车#icon-zixingche
-
婴儿#icon-yinger
-
关于我们#icon-guanyuwomen
-
首页-燃气费#icon-ranqifei
-
右箭头#icon-arrow-right1
-
相机#icon-xiangji
-
摩托车-01#icon-motuoche01
-
摩托车#icon-motuoche
-
珠宝#icon-zuanshi
-
分享#icon-share
-
搬家配送#icon-banjiapeisong
-
礼品#icon-lipin
-
购物车#icon-gouwuche
-
钱#icon-money
-
燃气管道#icon-ranqiguandao
-
开锁换锁#icon-kaisuohuansuo
-
房产房子#icon-chuzu
-
左箭头#icon-arrow-left
-
鲜花#icon-xianhua
-
保证担保#icon-baozhengdanbao
-
房子1#icon-zufang
-
退#icon-tui
-
商标认证#icon-shangbiaorenzheng
-
保姆月嫂-03#icon-baomuyuesao
-
家电维修#icon-tubiao-
-
商城#icon-shangcheng
-
回收站#icon-huishouzhan
-
展会管理#icon-zhanhuiguanli
-
包装#icon-packing
-
发货#icon-fahuo
-
货物#icon-address-manage
-
注意#icon-zhuyi
-
保洁#icon-baojie
-
向左实心箭头#icon-arrow-triangle-down
-
搜索#icon-sousuo
-
向下实心箭头#icon-arrow-up
-
消息#icon-xiaoxi1
-
水#icon-shui
-
部门策划审批#icon-cehua
-
水费#icon-shuifei
-
搜索#icon-search
-
评论#icon-pinglun
-
空调-f#icon-kongtiao-f
-
缴费#icon-jiaofei
-
推荐#icon-tuijian
-
手机#icon-shouji
-
店铺#icon-dianpu
-
委托贷款放款#icon-weituodaikuanfangkuan
-
爱心#icon-aixin
-
积分#icon-integral_icon
-
首页#icon-home
-
咨询#icon-zixun
-
电费#icon-dianfei
-
购物#icon-transfer
-
项目,房产,写字楼#icon-property
-
完成#icon-wancheng
-
编辑#icon-edit
-
工艺品#icon-gongyipin
-
洗澡#icon-xizao
-
喷绘#icon-penhuimdpi
-
纸巾#icon-zhijin
-
社区管理_表演物业#icon-zan
-
法律诉讼#icon-falvsusong
-
车#icon-che
-
消息#icon-xiaoxi
-
退换货#icon-tuihuanhuo
-
门店#icon-mendian
-
计算器#icon-jisuanqi
-
人#icon-ren
-
联系人#icon-lianxiren
-
收 藏 (1)#icon-shoucang
-
付款 (2)1#icon-fukuan
-
楼宇#icon-house
-
我的 未选中#icon-user
-
发货#icon-fahuo1
-
证件#icon-zhengjian
-
租赁委托#icon-zulinweituo
-
右箭头#icon-xiala
-
右箭头#icon-shangjiantou
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>