IconFont 图标
-
计算器#icon-jisuanqi
-
问题#icon-wenti
-
单选-默认#icon-danxuan-moren
-
单选-悬停#icon-danxuan-xuanting
-
单选-禁用#icon-danxuan-jinyong
-
复选-禁用#icon-fuxuan-jinyong
-
单选-禁用已选择#icon-danxuan-jinyongyixuanze
-
单选-选中#icon-danxuan-xuanzhong
-
复选-禁用已选择#icon-fuxuan-jinyongyixuanze
-
复选-默认#icon-fuxuan-moren
-
复选-悬停#icon-fuxuan-xuanting
-
icon-箭头下#icon-icon-jiantouxia
-
icon-箭头上#icon-icon-jiantoushang
-
icon-搜索#icon-icon-sousuo
-
向右#icon-xiangyou
-
iPhone 7 Copy 16#icon-iPhoneCopy
-
上滑加载更多#icon-shanghuajiazaigengduo
-
canzhao#icon-canzhao
-
删除#icon-shanchu
-
编辑#icon-bianji
-
增加#icon-zengjia
-
减少#icon-jianshao
-
日历#icon-rili
-
提示按钮-提醒#icon-tishianniutixing
-
提示按钮-关闭#icon-tishianniuguanbi
-
提示按钮-注意#icon-tishianniuzhuyi
-
提示按钮-成功#icon-tishianniuchenggong
-
下拉多选项hover-关闭#icon-xialaduoxuanxianghoverguanbi
-
复制#icon-fuzhi
-
交易大类#icon-jiaoyidalei
-
交易类型#icon-jiaoyileixing
-
事件#icon-shijian
-
更多#icon-gengduo
-
分摊#icon-fentan
-
联查#icon-liancha
-
计息#icon-jixi
-
取消计息#icon-quxiaojixi
-
预提#icon-yuti
-
取消预提#icon-quxiaoyuti
-
弹窗关闭#icon-guanbi
-
申赎状态#icon-shenshuzhuangtai
-
账户信息#icon-zhanghuxinxi
-
账户中心#icon-zhanghuzhongxin
-
记录中心#icon-jiluzhongxin
-
查看#icon-chakan
-
关闭#icon-guanbi1
-
变更记录#icon-biangengjilu
-
变更#icon-biangeng
-
侧拉#icon-cela
-
复选未全选项#icon-fuxuanweiquanxuanxiang
-
已选中项#icon-yixuanzhongxiang
-
无附件#icon-wufujian
-
有附件#icon-youfujian
-
向左#icon-xiangzuo
-
侧拉左#icon-celazuo
-
对账规则#icon-duizhang
-
发债申请#icon-fazhaishenqing
-
贷款交易#icon-daikuanjiaoyi
-
贷款申请#icon-daikuanshenqing
-
担保台账#icon-danbaotaizhang
-
担保管理#icon-danbaoguanli
-
交易成本分析#icon-jiaoyichengbenfenxi
-
发债交易#icon-fazhaijiaoyi
-
授信协议监控#icon-shouxinxieyijiankong
-
授信协议管理#icon-shouxinxieyiguanli
-
网银支付#icon-wangyinzhifu
-
手工确认#icon-shougongqueren
-
手工结算#icon-shougongjiesuan
-
退回#icon-tuihui
-
收回#icon-shouhui
-
作废#icon-zuofei
-
提交#icon-tijiao
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>