IconFont 图标
-
网络#icon-wangluo
-
组件分析#icon-zujianfenxi
-
ECS#icon-ecs
-
网络#icon-msnui-tree-map
-
云存储#icon-yuncunchu
-
安全#icon-anquan
-
VPN#icon-vpn
-
日志#icon-rizhi
-
负载均衡#icon-fuzaijunheng
-
gateway-or#icon-gatewayor
-
gateway-xor#icon-gatewayxor
-
vpc#icon-vpc
-
弹性公网 IP EIP#icon-icon
-
网络#icon-iconset0280
-
NAT策略#icon-natcelve
-
网络#icon-wangluo-copy
-
镜像#icon-copy-16
-
VPN#icon-vpn1
-
EIP#icon-13
-
负载均衡#icon-fuzaijunheng38
-
快照#icon-kuaizhao
-
实例#icon-instance
-
证书#icon-zhengshu
-
磁盘#icon-ecs-disk
-
高速通道#icon-gaosutongdao39
-
安全#icon-anquan1
-
安全#icon-webicon203
-
快照#icon-kuaizhao1
-
eip#icon-eip
-
ecs#icon-ecs1
-
网络#icon-wangluo1
-
证书#icon-zhengshu1
-
云服务器 ECS-无框#icon-yunfuwuqiecs33ccff
-
网络#icon-wangluo2
-
网络#icon-wangluo3
-
网络#icon-wangluo4
-
nat#icon-nat
-
ecs#icon-ecs2
-
gateway#icon-gateway
-
镜像#icon-jingxiang
-
日志#icon-rizhi1
-
eip#icon-danxinggongwangIPEIP
-
快照#icon-kuaizhao2
-
证书#icon-zhengshu1-copy
-
日志#icon-rizhi2
-
vpc#icon-siyouwangluoVPC
-
桌面视频#icon-zhuomianshipin
-
网络#icon-wangluo5
-
网络#icon-wangluo6
-
快照#icon-kuaizhao3
-
实例列表#icon-shililiebiao
-
网络#icon-wangluo7
-
ecs#icon-xingzhuangkaobei
-
EPC左导航图标-VPC#icon-EPCzuodaohangtubiao-
-
镜像#icon-image
-
高速通道#icon-gaosutongdao
-
VPN#icon-p_VPN
-
VPN#icon-VPN
-
svpc_subnet#icon-svpc_subnet
-
svpc_getway#icon-svpc_getway
-
svpc_safezone#icon-svpc_safezone
-
vpn#icon-vpn2
-
安全#icon-anquan2
-
安全#icon-cloud-safety
-
镜像仓库#icon-jingxiangcangku
-
VPN#icon-aistubiaozhizuo-
-
网络#icon-dianyinwangwangluojinrong
-
虚拟磁盘#icon-xunicipan
-
网络#icon-wangluo8
-
网络#icon-internet-other
-
安全#icon-anquan3
-
高速通道#icon-gaosutongdao1
-
专有网络 VPC#icon-zhuanyouwangluoVPC
-
NAT 网关#icon-NATwangguan
-
网关#icon-gateway1
-
专有网络 VPC#icon-zhuanyouwangluoVPC1
-
私有网络vpc#icon-icon-test
-
桌面#icon-zhuomian
-
证书#icon-zhengshu2
-
媒体#icon-meiti
-
云存储#icon-yuncunchu1
-
媒体#icon-meiti1
-
负载均衡#icon-fuzaijunheng1
-
快照#icon-kuaizhao4
-
镜像#icon-jingxiang1
-
云存储#icon-yuncunchu2
-
云存储管理#icon-yuncunchuguanli
-
添加实例#icon-tianjiashili
-
磁盘列阵#icon-cipanliezhen
-
Gateway#icon-Gateway
-
网关#icon-wangguan
-
组件icon_数据探索分析#icon-zujianicon_shujutansuofenxi
-
负载均衡#icon-fuzaijunheng2
-
网络#icon-wangluo9
-
nat#icon-nat1
-
流程实例#icon-process-instance
-
磁盘#icon-cipan
-
vpc网络#icon-vpcwangluo
-
EIP弹性ip#icon-EIPdanxingip
-
gateway#icon-gateway2
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>