IconFont 图标
-
天猫提示-公告#icon-gonggao
-
QQ#icon-87
-
优惠券#icon-youhuiquan1
-
返回#icon-fanhui
-
群蜂邮箱图标#icon-youxiangtubiao
-
群蜂微信#icon-qunfengweixin
-
群蜂删除-充#icon-qunfengshanchuchong
-
群蜂客服经理#icon-qunfengkefujingli
-
图片#icon-tupian
-
我的#icon-wode
-
礼物#icon-iconset0206
-
银行卡#icon-iconset0292
-
邮箱 邮件#icon-youxiang
-
感叹号#icon-iconfontgantanhao2
-
32-向上箭头#icon-xiangshangjiantou
-
我的红包#icon-wodehongbao
-
解锁_unlocked25#icon-jiesuounlocked25
-
充值#icon-3
-
注册登录-验证码#icon-zhucedengluyanzhengma
-
推荐人#icon-tuijianren
-
我的收货地址#icon-wodeshouhuodizhi
-
更多 小#icon-gengduoxiao
-
人物-01#icon-renwu01
-
lightning-闪电#icon-lightningshandian
-
lightning-b-闪电#icon-lightningbshandian
-
circle-2-圆圈#icon-circle2yuanquan
-
退款#icon-tuikuan
-
wan_money#icon-money
-
睁眼#icon-zhengyan
-
提示错误#icon-tishicuowu
-
money1#icon-money1
-
圆#icon-yuan
-
合作伙伴#icon-webicon306
-
手机#icon-shouji
-
好房拓 4.0.0 iconfont 2_经纪人#icon-haofangtuo400iconfont2jingjiren
-
优惠券#icon-youhuiquan2
-
刷新#icon-refresh
-
订单#icon-dingdan
-
密码#icon-mima
-
余额#icon-keyongyue
-
消息#icon-msg
-
用户头像#icon-icon-user-img
-
22加号#icon-22jiahao
-
yly_订单#icon-yly_dingdan
-
关闭#icon-guanbi
-
money-rmb#icon-money-rmb
-
错误#icon-cuowu
-
正确#icon-zhengque
-
17企业、园区、物业#icon-qiyeyuanquwuye
-
箭头_上#icon-jiantou_up
-
箭头_下#icon-jiantou_down
-
需方-合作#icon-hezuo
-
项目#icon-chanpin
-
下载#icon-download_icon
-
money#icon-money2
-
个人资料#icon-gerenziliao
-
闭眼#icon-biyan
-
优惠券#icon-youhuiquan
-
搜索#icon-sousuo
-
向右#icon-xiangyou
-
首页#icon-shouye
-
时间#icon-shijian
-
转出#icon-zhuanchu
-
转入#icon-zhuanru
-
福利券#icon-fuliquan
-
删除#icon-shanchu
-
搜索#icon-tubiaolunkuo-
-
商业建筑#icon-shangyejianzhu
-
项目管理#icon-chanpinguanli-copy
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>