IconFont 图标
-
全选#quanxuan
-
二维码#erweima
-
搜索#sousuo
-
加#jia
-
减#jian
-
手机#shouji
-
热门#remen
-
链接#lianjie
-
密码#mima
-
邮箱#youxiang
-
windows#windows
-
会员#huiyuan
-
大数据#dashuju
-
电脑版#diannaoban
-
推荐#tuijian
-
皇冠#huangguan
-
主页#home
-
认证#renzheng
-
手机版#mobile
-
左#zuo
-
签到#qiandao
-
订单#dingdan
-
点击#dianji
-
栏目#lanmu
-
开心#kaixin
-
咖啡#kafei
-
条码#iconset0254
-
地区#diqu
-
资格证书#zigezhengshu
-
奖励#jiangli
-
退出#tuichu
-
红包#hongbao
-
图片#tupian
-
暂停#pause
-
钻石#zuanshi
-
基础设置#jichushezhi
-
发现#faxian
-
刷新#shuaxin
-
佣金#yongjin
-
分享#fenxiang
-
打印#dayin
-
vip#vip
-
修改#xiugai
-
消息#xiaoxi
-
身份认证#shenfenrenzheng
-
定位#dingwei
-
电话 (1)#dianhua
-
共享#gongxiang
-
区域#quyu
-
待收货#daishouhuo
-
商品#shangpin
-
商户#shanghu
-
网站#wangzhan
-
推荐人#tuijianren
-
中文#zhongwen
-
银行卡#yinxingqia
-
验证码#yanzhenma
-
赠送#zengsong
-
定时#dingshi
-
安卓#anzhuo
-
结算#jiesuan
-
提现#tixian
-
未打款#weidakuan
-
已打款#yidakuan
-
银行#yinxing
-
下#xia
-
扫描#saomiao
-
聊天#liaotian
-
购物#gouwu
-
类别#menu
-
余额#yue
-
中国银行#zhongguoyinhang
-
更新#gengxin
-
客服#kefu
-
上#shang
-
云#yun
-
大小#daxiao
-
诊断#zhenduan
-
难过#nanguo
-
失败#shibai
-
商家#shangjia
-
加载#jiazai
-
评价#pingjia
-
传真#chuanzhen
-
统计#tongji
-
支付#zhifu
-
统计#tongji1
-
金币#jinbi
-
会员卡#huiyuanqia
-
信号#wifi
-
微博#weibo1
-
编辑#bianji
-
订阅#dingyue
-
表格#biaoge
-
成功#chenggong
-
取消#quxiao
-
建设银行#jiansheyinhang
-
浦发银行#pufayinhang
-
报警#icon-life-alarm
-
上传#shangchuan
-
交通银行#jiaotongyinhang
-
资料#ziliao
-
清除#qingchu
-
APP#APP
-
光大银行#guangdayinhang
-
仓库#cangku
-
错误#cuowu
-
查询#chaxun
-
审核#shenhe
-
作者#zuozhe
-
平安银行#pinganyinhang
-
文件#wenjian
-
退回#tuihui
-
帮助#bangzhu
-
华夏银行#huaxiayinhang
-
右#you
-
错误#error
-
列表#list
-
ppt#ppt
-
QQ#qq
-
云硬盘#yunyingpan
-
农业银行#nongyeyinhang
-
乘号#chenghao
-
证书#zhengshu
-
分析#fenxi
-
最高速度#sudu
-
复制#fuzhi
-
开始#kaishi
-
备案#icp
-
指纹#zhiwen
-
减少#jianshao
-
注册#zhuce
-
活动#huodong
-
批量#piliang
-
禁止#jinzhi
-
查看#chakan
-
剪切#jianqie
-
代理商#dailishang
-
工商银行#gongshangyinhang
-
充值#chongzhi
-
兴业银行#xingyeyinhang
-
合同#hetong
-
优惠券#youhuiquan
-
设置#shezhi
-
确定#queding
-
打开#dakai
-
ios#ios
-
折扣#zhekou
-
广发银行#guangfayinhang
-
中信银行#zhongxinyinhang
-
隐藏#yincang
-
积分#jifen
-
价格#jiage
-
收银#shouyin
-
日历#time
-
招商银行#zhaoshangyinhang
-
支付宝#zhifubao
-
待发货#daifahuo
-
限制#xianzhi
-
交易#jiaoyi
-
提示#tishi
-
处理中#chulizhong
-
标签#biaoqian
-
成员#chengyuan
-
返回#fanhui
-
通知#tongzhi
-
Excel#Excel
-
时间#shijian
-
下载#xiazai
-
微信#weixin
-
word#word
-
删除#shanchu
-
登录#denglu
-
结束#jieshu
-
收 藏#shoucang
-
英文#yingwen
-
浏览#liulan
-
兑换#duihuan
-
无数据#wushuju
-
版本#banben
-
管理员#admin
-
除#chu
-
异常#yichang
-
收入#shouru
-
微信 支付#weixinzhifu
-
公安#gongan
-
民生银行#minshengyinhang
-
处理中#chuli
-
冻结#dongjie
-
页面#yemian
-
添加#add
-
信用卡-我的#xinyongqia
-
线上#xianshang
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="#xxx"></use>
</svg>