IconFont 图标
-
搜索#W_icon-sousuo
-
应用#W_icon-yingyong
-
购物车#W_icon-msnui-cart
-
信息2#W_icon-xinxi2
-
统计#W_icon-tongji
-
应用#W_icon-yingyong1
-
沙漏2#W_icon-shalou2
-
删除#W_icon-shanchu
-
配发信息#W_icon-peifaxinxi
-
标签#W_icon-biaoqian
-
学校#W_icon-20
-
应用#W_icon-yingyong2
-
银行卡#W_icon-yinxingqia
-
安装包#W_icon-jingxiang
-
流量#W_icon-liuliang
-
短信#W_icon-duanxin
-
工作桌面#W_icon-gongzuozhuomian
-
学校官方#W_icon-xuexiaoguanfang
-
mysql数据库#W_icon-mysqlshujuku
-
业务#W_icon-heilongjiangtubiao06
-
保存#W_icon-save
-
add#W_icon-add
-
arrow_drop_down#W_icon-arrowdropdown
-
arrow_drop_up#W_icon-arrowdropup
-
clear#W_icon-clear
-
delete#W_icon-delete
-
edit#W_icon-edit
-
send#W_icon-send
-
timer#W_icon-timer
-
融合业务#W_icon-rongheyewu
-
配置_configuration15#W_icon-peizhiconfiguration15
-
五角星#W_icon-star
-
产量#W_icon-chanliang
-
表单_块#W_icon-biaodankuai
-
锁#W_icon-suo
-
微信#W_icon-weixin
-
信息#W_icon-xinxi
-
头像#W_icon-userpro
-
告警#W_icon-gaojing
-
安安租账户#W_icon-iconzhenghe06
-
supervisor_account#W_icon-supervisoraccount
-
治理中#W_icon-zhilizhong
-
我的设备#W_icon-wodeshebei
-
1-11 镜像#W_icon-111jingxiang
-
磁盘io#W_icon-cipanio
-
cpu#W_icon-cpu
-
凑数-储存#W_icon-chucun
-
服务节点#W_icon-fuwujiedian
-
连接#W_icon-lianjie
-
验证码验证#W_icon-yanzhengmayanzheng
-
使用时长#W_icon-shiyongshichang2
-
容量#W_icon-rongliang
-
空间#W_icon-kongjian
-
IO#W_icon-io
-
移动#W_icon-yidong
-
pc#W_icon-pc
-
节点连接#W_icon-jiedianlianjie
-
节点未连接 -#W_icon-jiedianweilianjie-
-
合同类#W_icon-hetonglei
-
合同类outline#W_icon-hetongleioutline
-
用途类#W_icon-yongtulei
-
用途类outline#W_icon-yongtuleioutline
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="#W_icon-xxx"></use>
</svg>