ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
V0.9.1
V0.9.2
V0.9.3
V0.9.4
V0.9.4.1
V0.9.4.2
V0.9.5
V0.9.6
V0.9.6.1
V0.9.7
V0.9.7.2
V0.9.7.3
V0.9.8
V0.9.8.1
V0.9.8.5
V0.9.8.6
V0.9.9
V1.0.0
V1.1.0
V1.2.0
V1.2.1
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '04358e5f5d'
${ noResults }
tanghe-report/report-ui/src/assets/iconfont/demo_index.html

2926 lines
101 KiB
HTML
Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1513211" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">导出</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">导入</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ca;</span>
<div class="name">对比图谱</div>
<div class="code-name">&amp;#xe9ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe635;</span>
<div class="name">折线</div>
<div class="code-name">&amp;#xe635;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">堆叠图</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">堆叠图</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe645;</span>
<div class="name">文件</div>
<div class="code-name">&amp;#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7df;</span>
<div class="name">字典项</div>
<div class="code-name">&amp;#xe7df;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66b;</span>
<div class="name">API网关</div>
<div class="code-name">&amp;#xe66b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7b6;</span>
<div class="name">database</div>
<div class="code-name">&amp;#xe7b6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">百分比</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70f;</span>
<div class="name">文件</div>
<div class="code-name">&amp;#xe70f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe724;</span>
<div class="name">上</div>
<div class="code-name">&amp;#xe724;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6af;</span>
<div class="name">下</div>
<div class="code-name">&amp;#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">复制</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe738;</span>
<div class="name">中国地图</div>
<div class="code-name">&amp;#xe738;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">表格</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe646;</span>
<div class="name">个性装扮</div>
<div class="code-name">&amp;#xe646;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe72e;</span>
<div class="name">仪表盘-抄表</div>
<div class="code-name">&amp;#xe72e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe851;</span>
<div class="name">南丁格尔玫瑰图</div>
<div class="code-name">&amp;#xe851;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">展 开 </div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe650;</span>
<div class="name">excel</div>
<div class="code-name">&amp;#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe737;</span>
<div class="name">保存</div>
<div class="code-name">&amp;#xe737;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c5;</span>
<div class="name">关 闭</div>
<div class="code-name">&amp;#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">pdf</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">复制</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe78c;</span>
<div class="name">020空心饼图</div>
<div class="code-name">&amp;#xe78c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe662;</span>
<div class="name">时间</div>
<div class="code-name">&amp;#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f6;</span>
<div class="name">保存</div>
<div class="code-name">&amp;#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">柱状图</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65f;</span>
<div class="name">超链接</div>
<div class="code-name">&amp;#xe65f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">文本</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xecc1;</span>
<div class="name">视频</div>
<div class="code-name">&amp;#xecc1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66a;</span>
<div class="name">框架</div>
<div class="code-name">&amp;#xe66a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe728;</span>
<div class="name">预览</div>
<div class="code-name">&amp;#xe728;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">横向文字</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">图表 _饼图</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d5;</span>
<div class="name">漏斗图</div>
<div class="code-name">&amp;#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">图表 折线图</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">柱线图</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe81d;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xe81d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe706;</span>
<div class="name">仪表盘</div>
<div class="code-name">&amp;#xe706;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63b;</span>
<div class="name">返回</div>
<div class="code-name">&amp;#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe639;</span>
<div class="name">下载</div>
<div class="code-name">&amp;#xe639;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe784;</span>
<div class="name">下载</div>
<div class="code-name">&amp;#xe784;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe769;</span>
<div class="name">邮箱</div>
<div class="code-name">&amp;#xe769;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64d;</span>
<div class="name">绑定手机</div>
<div class="code-name">&amp;#xe64d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe854;</span>
<div class="name">手机</div>
<div class="code-name">&amp;#xe854;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe871;</span>
<div class="name">52-手机</div>
<div class="code-name">&amp;#xe871;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">home</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">home</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65a;</span>
<div class="name">Kafka</div>
<div class="code-name">&amp;#xe65a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64f;</span>
<div class="name">数据接入—Kafka集群</div>
<div class="code-name">&amp;#xe64f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f2;</span>
<div class="name">kafka</div>
<div class="code-name">&amp;#xe6f2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe853;</span>
<div class="name">elasticsearch-Elasticsearch</div>
<div class="code-name">&amp;#xe853;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb3f;</span>
<div class="name">apachekafka</div>
<div class="code-name">&amp;#xeb3f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb85;</span>
<div class="name">elasticsearch</div>
<div class="code-name">&amp;#xeb85;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8d1;</span>
<div class="name">问题反馈</div>
<div class="code-name">&amp;#xe8d1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70e;</span>
<div class="name">问题反馈</div>
<div class="code-name">&amp;#xe70e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">问题反馈</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8a4;</span>
<div class="name">alikafka 消息队列Kafka</div>
<div class="code-name">&amp;#xe8a4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe682;</span>
<div class="name">项目查询-查看设备</div>
<div class="code-name">&amp;#xe682;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a1;</span>
<div class="name">elasticsearch Elasticsearch</div>
<div class="code-name">&amp;#xe6a1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">511统计_树图</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">分享</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">分享</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">分享</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">告警-紧急</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68a;</span>
<div class="name">完成安全事件</div>
<div class="code-name">&amp;#xe68a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe74d;</span>
<div class="name">eventbridge 消息事件总线</div>
<div class="code-name">&amp;#xe74d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">树</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">设备关机</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d8;</span>
<div class="name">好房拓 4.0.0 iconfont_短信</div>
<div class="code-name">&amp;#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe661;</span>
<div class="name">业务参数</div>
<div class="code-name">&amp;#xe661;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe660;</span>
<div class="name">列表</div>
<div class="code-name">&amp;#xe660;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">编辑</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63a;</span>
<div class="name">邮件</div>
<div class="code-name">&amp;#xe63a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe678;</span>
<div class="name">社交钉钉</div>
<div class="code-name">&amp;#xe678;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">字典管理</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73f;</span>
<div class="name">图表</div>
<div class="code-name">&amp;#xe73f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe690;</span>
<div class="name">钉钉</div>
<div class="code-name">&amp;#xe690;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">短信</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe714;</span>
<div class="name">directmail 邮件推送</div>
<div class="code-name">&amp;#xe714;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">设备设施</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe606;</span>
<div class="name">通知</div>
<div class="code-name">&amp;#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe663;</span>
<div class="name">日志</div>
<div class="code-name">&amp;#xe663;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe689;</span>
<div class="name">触发器配置-灰</div>
<div class="code-name">&amp;#xe689;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe759;</span>
<div class="name">vcs 视觉计算服务</div>
<div class="code-name">&amp;#xe759;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">设备</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">user-before</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">科目维护图标</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe677;</span>
<div class="name">会计科目维护</div>
<div class="code-name">&amp;#xe677;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dd;</span>
<div class="name">成本查询</div>
<div class="code-name">&amp;#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c7;</span>
<div class="name">成本数据管理</div>
<div class="code-name">&amp;#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71d;</span>
<div class="name">基本数据</div>
<div class="code-name">&amp;#xe71d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe72d;</span>
<div class="name">B-省市区</div>
<div class="code-name">&amp;#xe72d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66e;</span>
<div class="name">组织机构</div>
<div class="code-name">&amp;#xe66e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8c5;</span>
<div class="name">按钮</div>
<div class="code-name">&amp;#xe8c5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">菜单</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67f;</span>
<div class="name">问号</div>
<div class="code-name">&amp;#xe67f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">垃圾桶</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">重置密码</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68f;</span>
<div class="name">设置</div>
<div class="code-name">&amp;#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69b;</span>
<div class="name">中转</div>
<div class="code-name">&amp;#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b9;</span>
<div class="name">add</div>
<div class="code-name">&amp;#xe6b9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ba;</span>
<div class="name">minus</div>
<div class="code-name">&amp;#xe6ba;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">password</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">用户</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe633;</span>
<div class="name">权限</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64c;</span>
<div class="name">角色</div>
<div class="code-name">&amp;#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe716;</span>
<div class="name">字典</div>
<div class="code-name">&amp;#xe716;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe672;</span>
<div class="name">参数设置</div>
<div class="code-name">&amp;#xe672;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe642;</span>
<div class="name">编辑</div>
<div class="code-name">&amp;#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">用户权限</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">分享</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">授权</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe653;</span>
<div class="name">左箭头</div>
<div class="code-name">&amp;#xe653;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe654;</span>
<div class="name">左箭头</div>
<div class="code-name">&amp;#xe654;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1629797734566') format('woff2'),
url('iconfont.woff?t=1629797734566') format('woff'),
url('iconfont.ttf?t=1629797734566') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icondaochu"></span>
<div class="name">
导出
</div>
<div class="code-name">.icondaochu
</div>
</li>
<li class="dib">
<span class="icon iconfont icondaoru"></span>
<div class="name">
导入
</div>
<div class="code-name">.icondaoru
</div>
</li>
<li class="dib">
<span class="icon iconfont iconduibitupu"></span>
<div class="name">
对比图谱
</div>
<div class="code-name">.iconduibitupu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhexian"></span>
<div class="name">
折线
</div>
<div class="code-name">.iconzhexian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbianzu23"></span>
<div class="name">
堆叠图
</div>
<div class="code-name">.iconbianzu23
</div>
</li>
<li class="dib">
<span class="icon iconfont iconduidietu"></span>
<div class="name">
堆叠图
</div>
<div class="code-name">.iconduidietu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfill_folder"></span>
<div class="name">
文件
</div>
<div class="code-name">.iconfill_folder
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzidianxiang"></span>
<div class="name">
字典项
</div>
<div class="code-name">.iconzidianxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconAPIwangguan"></span>
<div class="name">
API网关
</div>
<div class="code-name">.iconAPIwangguan
</div>
</li>
<li class="dib">
<span class="icon iconfont icondatabase"></span>
<div class="name">
database
</div>
<div class="code-name">.icondatabase
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbaifenbi"></span>
<div class="name">
百分比
</div>
<div class="code-name">.iconbaifenbi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfolder-o"></span>
<div class="name">
文件
</div>
<div class="code-name">.iconfolder-o
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjinlingyingcaiwangtubiao01"></span>
<div class="name">
上
</div>
<div class="code-name">.iconjinlingyingcaiwangtubiao01
</div>
</li>
<li class="dib">
<span class="icon iconfont iconleft-copy"></span>
<div class="name">
下
</div>
<div class="code-name">.iconleft-copy
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfuzhi1"></span>
<div class="name">
复制
</div>
<div class="code-name">.iconfuzhi1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhongguoditu"></span>
<div class="name">
中国地图
</div>
<div class="code-name">.iconzhongguoditu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbiaoge"></span>
<div class="name">
表格
</div>
<div class="code-name">.iconbiaoge
</div>
</li>
<li class="dib">
<span class="icon iconfont icongexingzhuangban"></span>
<div class="name">
个性装扮
</div>
<div class="code-name">.icongexingzhuangban
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyibiaopan-chaobiao"></span>
<div class="name">
仪表盘-抄表
</div>
<div class="code-name">.iconyibiaopan-chaobiao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconnandinggeermeiguitu"></span>
<div class="name">
南丁格尔玫瑰图
</div>
<div class="code-name">.iconnandinggeermeiguitu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhankai"></span>
<div class="name">
展 开
</div>
<div class="code-name">.iconzhankai
</div>
</li>
<li class="dib">
<span class="icon iconfont iconexcel"></span>
<div class="name">
excel
</div>
<div class="code-name">.iconexcel
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbaocun"></span>
<div class="name">
保存
</div>
<div class="code-name">.iconbaocun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconguanbi"></span>
<div class="name">
关 闭
</div>
<div class="code-name">.iconguanbi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpdf"></span>
<div class="name">
pdf
</div>
<div class="code-name">.iconpdf
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfuzhi"></span>
<div class="name">
复制
</div>
<div class="code-name">.iconfuzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon020kongxinbingtu"></span>
<div class="name">
020空心饼图
</div>
<div class="code-name">.icon020kongxinbingtu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshijian"></span>
<div class="name">
时间
</div>
<div class="code-name">.iconshijian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconsave"></span>
<div class="name">
保存
</div>
<div class="code-name">.iconsave
</div>
</li>
<li class="dib">
<span class="icon iconfont icontupian"></span>
<div class="name">
图片
</div>
<div class="code-name">.icontupian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhuzhuangtu"></span>
<div class="name">
柱状图
</div>
<div class="code-name">.iconzhuzhuangtu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchaolianjie"></span>
<div class="name">
超链接
</div>
<div class="code-name">.iconchaolianjie
</div>
</li>
<li class="dib">
<span class="icon iconfont iconziyuan"></span>
<div class="name">
文本
</div>
<div class="code-name">.iconziyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshipin"></span>
<div class="name">
视频
</div>
<div class="code-name">.iconshipin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconkuangjia"></span>
<div class="name">
框架
</div>
<div class="code-name">.iconkuangjia
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyulan"></span>
<div class="name">
预览
</div>
<div class="code-name">.iconyulan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhengxiangwenzi"></span>
<div class="name">
横向文字
</div>
<div class="code-name">.iconhengxiangwenzi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconicon_tubiao_bingtu"></span>
<div class="name">
图表 _饼图
</div>
<div class="code-name">.iconicon_tubiao_bingtu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconloudoutu"></span>
<div class="name">
漏斗图
</div>
<div class="code-name">.iconloudoutu
</div>
</li>
<li class="dib">
<span class="icon iconfont icontubiaozhexiantu"></span>
<div class="name">
图表 折线图
</div>
<div class="code-name">.icontubiaozhexiantu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhuxiantu"></span>
<div class="name">
柱线图
</div>
<div class="code-name">.iconzhuxiantu
</div>
</li>
<li class="dib">
<span class="icon iconfont icontupian1"></span>
<div class="name">
图片
</div>
<div class="code-name">.icontupian1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyibiaopan"></span>
<div class="name">
仪表盘
</div>
<div class="code-name">.iconyibiaopan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1"></span>
<div class="name">
返回
</div>
<div class="code-name">.icon1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxiazai"></span>
<div class="name">
下载
</div>
<div class="code-name">.iconxiazai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon11-04"></span>
<div class="name">
下载
</div>
<div class="code-name">.icon11-04
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyouxiang"></span>
<div class="name">
邮箱
</div>
<div class="code-name">.iconyouxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbangdingshouji"></span>
<div class="name">
绑定手机
</div>
<div class="code-name">.iconbangdingshouji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouji"></span>
<div class="name">
手机
</div>
<div class="code-name">.iconshouji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon52-shouji"></span>
<div class="name">
52-手机
</div>
<div class="code-name">.icon52-shouji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhome"></span>
<div class="name">
home
</div>
<div class="code-name">.iconhome
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhome2"></span>
<div class="name">
home
</div>
<div class="code-name">.iconhome2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconKafka"></span>
<div class="name">
Kafka
</div>
<div class="code-name">.iconKafka
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshujujieruKafkajiqun"></span>
<div class="name">
数据接入—Kafka集群
</div>
<div class="code-name">.iconshujujieruKafkajiqun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconkafka"></span>
<div class="name">
kafka
</div>
<div class="code-name">.iconkafka
</div>
</li>
<li class="dib">
<span class="icon iconfont iconelasticsearch-Elasticsearch"></span>
<div class="name">
elasticsearch-Elasticsearch
</div>
<div class="code-name">.iconelasticsearch-Elasticsearch
</div>
</li>
<li class="dib">
<span class="icon iconfont iconapachekafka"></span>
<div class="name">
apachekafka
</div>
<div class="code-name">.iconapachekafka
</div>
</li>
<li class="dib">
<span class="icon iconfont iconelasticsearch"></span>
<div class="name">
elasticsearch
</div>
<div class="code-name">.iconelasticsearch
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwentifankui"></span>
<div class="name">
问题反馈
</div>
<div class="code-name">.iconwentifankui
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwentifankui1"></span>
<div class="name">
问题反馈
</div>
<div class="code-name">.iconwentifankui1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwentifankui2"></span>
<div class="name">
问题反馈
</div>
<div class="code-name">.iconwentifankui2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconalikafkaxiaoxiduilieKafka"></span>
<div class="name">
alikafka 消息队列Kafka
</div>
<div class="code-name">.iconalikafkaxiaoxiduilieKafka
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxiangmuchaxun-chakanshebei"></span>
<div class="name">
项目查询-查看设备
</div>
<div class="code-name">.iconxiangmuchaxun-chakanshebei
</div>
</li>
<li class="dib">
<span class="icon iconfont iconelasticsearchElasticsearch"></span>
<div class="name">
elasticsearch Elasticsearch
</div>
<div class="code-name">.iconelasticsearchElasticsearch
</div>
</li>
<li class="dib">
<span class="icon iconfont icon511tongji_shutu"></span>
<div class="name">
511统计_树图
</div>
<div class="code-name">.icon511tongji_shutu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfenxiang1"></span>
<div class="name">
分享
</div>
<div class="code-name">.iconfenxiang1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfenxiang2"></span>
<div class="name">
分享
</div>
<div class="code-name">.iconfenxiang2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfenxiang_2"></span>
<div class="name">
分享
</div>
<div class="code-name">.iconfenxiang_2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconNMStubiao-"></span>
<div class="name">
告警-紧急
</div>
<div class="code-name">.iconNMStubiao-
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwanchenganquanshijian"></span>
<div class="name">
完成安全事件
</div>
<div class="code-name">.iconwanchenganquanshijian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconeventbridgexiaoxishijianzongxian"></span>
<div class="name">
eventbridge 消息事件总线
</div>
<div class="code-name">.iconeventbridgexiaoxishijianzongxian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshu"></span>
<div class="name">
树
</div>
<div class="code-name">.iconshu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshebeiguanji"></span>
<div class="name">
设备关机
</div>
<div class="code-name">.iconshebeiguanji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhaofangtuo400iconfontduanxin"></span>
<div class="name">
好房拓 4.0.0 iconfont_短信
</div>
<div class="code-name">.iconhaofangtuo400iconfontduanxin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconnavicon-ywcs"></span>
<div class="name">
业务参数
</div>
<div class="code-name">.iconnavicon-ywcs
</div>
</li>
<li class="dib">
<span class="icon iconfont iconliebiao"></span>
<div class="name">
列表
</div>
<div class="code-name">.iconliebiao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbianji"></span>
<div class="name">
编辑
</div>
<div class="code-name">.iconbianji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyoujian"></span>
<div class="name">
邮件
</div>
<div class="code-name">.iconyoujian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshejiaodingding"></span>
<div class="name">
社交钉钉
</div>
<div class="code-name">.iconshejiaodingding
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzidianguanli"></span>
<div class="name">
字典管理
</div>
<div class="code-name">.iconzidianguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icontubiao"></span>
<div class="name">
图表
</div>
<div class="code-name">.icontubiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icondingding"></span>
<div class="name">
钉钉
</div>
<div class="code-name">.icondingding
</div>
</li>
<li class="dib">
<span class="icon iconfont iconduanxin"></span>
<div class="name">
短信
</div>
<div class="code-name">.iconduanxin
</div>
</li>
<li class="dib">
<span class="icon iconfont icondirectmailyoujiantuisong"></span>
<div class="name">
directmail 邮件推送
</div>
<div class="code-name">.icondirectmailyoujiantuisong
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshebeisheshi"></span>
<div class="name">
设备设施
</div>
<div class="code-name">.iconshebeisheshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icontongzhi"></span>
<div class="name">
通知
</div>
<div class="code-name">.icontongzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconrizhi"></span>
<div class="name">
日志
</div>
<div class="code-name">.iconrizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchufaqipeizhi-hui"></span>
<div class="name">
触发器配置-灰
</div>
<div class="code-name">.iconchufaqipeizhi-hui
</div>
</li>
<li class="dib">
<span class="icon iconfont iconvcsshijuejisuanfuwu"></span>
<div class="name">
vcs 视觉计算服务
</div>
<div class="code-name">.iconvcsshijuejisuanfuwu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbar_icon_shebei"></span>
<div class="name">
设备
</div>
<div class="code-name">.iconbar_icon_shebei
</div>
</li>
<li class="dib">
<span class="icon iconfont iconuser-before"></span>
<div class="name">
user-before
</div>
<div class="code-name">.iconuser-before
</div>
</li>
<li class="dib">
<span class="icon iconfont iconkemuweihutubiao"></span>
<div class="name">
科目维护图标
</div>
<div class="code-name">.iconkemuweihutubiao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconaccounting-subjects"></span>
<div class="name">
会计科目维护
</div>
<div class="code-name">.iconaccounting-subjects
</div>
</li>
<li class="dib">
<span class="icon iconfont iconRectangleCopy"></span>
<div class="name">
成本查询
</div>
<div class="code-name">.iconRectangleCopy
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchengbenshujuguanli"></span>
<div class="name">
成本数据管理
</div>
<div class="code-name">.iconchengbenshujuguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjibenshuju"></span>
<div class="name">
基本数据
</div>
<div class="code-name">.iconjibenshuju
</div>
</li>
<li class="dib">
<span class="icon iconfont iconB-shengshiqu"></span>
<div class="name">
B-省市区
</div>
<div class="code-name">.iconB-shengshiqu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzuzhijigou"></span>
<div class="name">
组织机构
</div>
<div class="code-name">.iconzuzhijigou
</div>
</li>
<li class="dib">
<span class="icon iconfont iconanniu"></span>
<div class="name">
按钮
</div>
<div class="code-name">.iconanniu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconcaidan2"></span>
<div class="name">
菜单
</div>
<div class="code-name">.iconcaidan2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwenhao"></span>
<div class="name">
问号
</div>
<div class="code-name">.iconwenhao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconlajitong"></span>
<div class="name">
垃圾桶
</div>
<div class="code-name">.iconlajitong
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhongzhimima"></span>
<div class="name">
重置密码
</div>
<div class="code-name">.iconzhongzhimima
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshezhi"></span>
<div class="name">
设置
</div>
<div class="code-name">.iconshezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhongzhuan"></span>
<div class="name">
中转
</div>
<div class="code-name">.iconzhongzhuan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconadd"></span>
<div class="name">
add
</div>
<div class="code-name">.iconadd
</div>
</li>
<li class="dib">
<span class="icon iconfont iconminus"></span>
<div class="name">
minus
</div>
<div class="code-name">.iconminus
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpassword"></span>
<div class="name">
password
</div>
<div class="code-name">.iconpassword
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyonghu"></span>
<div class="name">
用户
</div>
<div class="code-name">.iconyonghu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconquanxian"></span>
<div class="name">
权限
</div>
<div class="code-name">.iconquanxian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjiaose1"></span>
<div class="name">
角色
</div>
<div class="code-name">.iconjiaose1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzidian"></span>
<div class="name">
字典
</div>
<div class="code-name">.iconzidian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconcssz"></span>
<div class="name">
参数设置
</div>
<div class="code-name">.iconcssz
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbianji1"></span>
<div class="name">
编辑
</div>
<div class="code-name">.iconbianji1
</div>
</li>
<li class="dib">
<span class="icon iconfont icondfzq-"></span>
<div class="name">
用户权限
</div>
<div class="code-name">.icondfzq-
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfenxiang"></span>
<div class="name">
分享
</div>
<div class="code-name">.iconfenxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouquan1"></span>
<div class="name">
授权
</div>
<div class="code-name">.iconshouquan1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjiantou"></span>
<div class="name">
左箭头
</div>
<div class="code-name">.iconjiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjiantou-copy-copy"></span>
<div class="name">
左箭头
</div>
<div class="code-name">.iconjiantou-copy-copy
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondaochu"></use>
</svg>
<div class="name">导出</div>
<div class="code-name">#icondaochu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondaoru"></use>
</svg>
<div class="name">导入</div>
<div class="code-name">#icondaoru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconduibitupu"></use>
</svg>
<div class="name">对比图谱</div>
<div class="code-name">#iconduibitupu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhexian"></use>
</svg>
<div class="name">折线</div>
<div class="code-name">#iconzhexian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbianzu23"></use>
</svg>
<div class="name">堆叠图</div>
<div class="code-name">#iconbianzu23</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconduidietu"></use>
</svg>
<div class="name">堆叠图</div>
<div class="code-name">#iconduidietu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfill_folder"></use>
</svg>
<div class="name">文件</div>
<div class="code-name">#iconfill_folder</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzidianxiang"></use>
</svg>
<div class="name">字典项</div>
<div class="code-name">#iconzidianxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconAPIwangguan"></use>
</svg>
<div class="name">API网关</div>
<div class="code-name">#iconAPIwangguan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondatabase"></use>
</svg>
<div class="name">database</div>
<div class="code-name">#icondatabase</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbaifenbi"></use>
</svg>
<div class="name">百分比</div>
<div class="code-name">#iconbaifenbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfolder-o"></use>
</svg>
<div class="name">文件</div>
<div class="code-name">#iconfolder-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjinlingyingcaiwangtubiao01"></use>
</svg>
<div class="name">上</div>
<div class="code-name">#iconjinlingyingcaiwangtubiao01</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconleft-copy"></use>
</svg>
<div class="name">下</div>
<div class="code-name">#iconleft-copy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfuzhi1"></use>
</svg>
<div class="name">复制</div>
<div class="code-name">#iconfuzhi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhongguoditu"></use>
</svg>
<div class="name">中国地图</div>
<div class="code-name">#iconzhongguoditu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbiaoge"></use>
</svg>
<div class="name">表格</div>
<div class="code-name">#iconbiaoge</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icongexingzhuangban"></use>
</svg>
<div class="name">个性装扮</div>
<div class="code-name">#icongexingzhuangban</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyibiaopan-chaobiao"></use>
</svg>
<div class="name">仪表盘-抄表</div>
<div class="code-name">#iconyibiaopan-chaobiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconnandinggeermeiguitu"></use>
</svg>
<div class="name">南丁格尔玫瑰图</div>
<div class="code-name">#iconnandinggeermeiguitu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhankai"></use>
</svg>
<div class="name">展 开 </div>
<div class="code-name">#iconzhankai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconexcel"></use>
</svg>
<div class="name">excel</div>
<div class="code-name">#iconexcel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbaocun"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#iconbaocun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconguanbi"></use>
</svg>
<div class="name">关 闭</div>
<div class="code-name">#iconguanbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpdf"></use>
</svg>
<div class="name">pdf</div>
<div class="code-name">#iconpdf</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfuzhi"></use>
</svg>
<div class="name">复制</div>
<div class="code-name">#iconfuzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon020kongxinbingtu"></use>
</svg>
<div class="name">020空心饼图</div>
<div class="code-name">#icon020kongxinbingtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshijian"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#iconshijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconsave"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#iconsave</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontupian"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icontupian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhuzhuangtu"></use>
</svg>
<div class="name">柱状图</div>
<div class="code-name">#iconzhuzhuangtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchaolianjie"></use>
</svg>
<div class="name">超链接</div>
<div class="code-name">#iconchaolianjie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconziyuan"></use>
</svg>
<div class="name">文本</div>
<div class="code-name">#iconziyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshipin"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#iconshipin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconkuangjia"></use>
</svg>
<div class="name">框架</div>
<div class="code-name">#iconkuangjia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyulan"></use>
</svg>
<div class="name">预览</div>
<div class="code-name">#iconyulan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhengxiangwenzi"></use>
</svg>
<div class="name">横向文字</div>
<div class="code-name">#iconhengxiangwenzi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconicon_tubiao_bingtu"></use>
</svg>
<div class="name">图表 _饼图</div>
<div class="code-name">#iconicon_tubiao_bingtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconloudoutu"></use>
</svg>
<div class="name">漏斗图</div>
<div class="code-name">#iconloudoutu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontubiaozhexiantu"></use>
</svg>
<div class="name">图表 折线图</div>
<div class="code-name">#icontubiaozhexiantu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhuxiantu"></use>
</svg>
<div class="name">柱线图</div>
<div class="code-name">#iconzhuxiantu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontupian1"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icontupian1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyibiaopan"></use>
</svg>
<div class="name">仪表盘</div>
<div class="code-name">#iconyibiaopan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1"></use>
</svg>
<div class="name">返回</div>
<div class="code-name">#icon1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxiazai"></use>
</svg>
<div class="name">下载</div>
<div class="code-name">#iconxiazai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon11-04"></use>
</svg>
<div class="name">下载</div>
<div class="code-name">#icon11-04</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyouxiang"></use>
</svg>
<div class="name">邮箱</div>
<div class="code-name">#iconyouxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbangdingshouji"></use>
</svg>
<div class="name">绑定手机</div>
<div class="code-name">#iconbangdingshouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouji"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#iconshouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon52-shouji"></use>
</svg>
<div class="name">52-手机</div>
<div class="code-name">#icon52-shouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhome"></use>
</svg>
<div class="name">home</div>
<div class="code-name">#iconhome</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhome2"></use>
</svg>
<div class="name">home</div>
<div class="code-name">#iconhome2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconKafka"></use>
</svg>
<div class="name">Kafka</div>
<div class="code-name">#iconKafka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshujujieruKafkajiqun"></use>
</svg>
<div class="name">数据接入—Kafka集群</div>
<div class="code-name">#iconshujujieruKafkajiqun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconkafka"></use>
</svg>
<div class="name">kafka</div>
<div class="code-name">#iconkafka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconelasticsearch-Elasticsearch"></use>
</svg>
<div class="name">elasticsearch-Elasticsearch</div>
<div class="code-name">#iconelasticsearch-Elasticsearch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconapachekafka"></use>
</svg>
<div class="name">apachekafka</div>
<div class="code-name">#iconapachekafka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconelasticsearch"></use>
</svg>
<div class="name">elasticsearch</div>
<div class="code-name">#iconelasticsearch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwentifankui"></use>
</svg>
<div class="name">问题反馈</div>
<div class="code-name">#iconwentifankui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwentifankui1"></use>
</svg>
<div class="name">问题反馈</div>
<div class="code-name">#iconwentifankui1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwentifankui2"></use>
</svg>
<div class="name">问题反馈</div>
<div class="code-name">#iconwentifankui2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconalikafkaxiaoxiduilieKafka"></use>
</svg>
<div class="name">alikafka 消息队列Kafka</div>
<div class="code-name">#iconalikafkaxiaoxiduilieKafka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxiangmuchaxun-chakanshebei"></use>
</svg>
<div class="name">项目查询-查看设备</div>
<div class="code-name">#iconxiangmuchaxun-chakanshebei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconelasticsearchElasticsearch"></use>
</svg>
<div class="name">elasticsearch Elasticsearch</div>
<div class="code-name">#iconelasticsearchElasticsearch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon511tongji_shutu"></use>
</svg>
<div class="name">511统计_树图</div>
<div class="code-name">#icon511tongji_shutu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfenxiang1"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#iconfenxiang1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfenxiang2"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#iconfenxiang2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfenxiang_2"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#iconfenxiang_2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconNMStubiao-"></use>
</svg>
<div class="name">告警-紧急</div>
<div class="code-name">#iconNMStubiao-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwanchenganquanshijian"></use>
</svg>
<div class="name">完成安全事件</div>
<div class="code-name">#iconwanchenganquanshijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconeventbridgexiaoxishijianzongxian"></use>
</svg>
<div class="name">eventbridge 消息事件总线</div>
<div class="code-name">#iconeventbridgexiaoxishijianzongxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshu"></use>
</svg>
<div class="name">树</div>
<div class="code-name">#iconshu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshebeiguanji"></use>
</svg>
<div class="name">设备关机</div>
<div class="code-name">#iconshebeiguanji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhaofangtuo400iconfontduanxin"></use>
</svg>
<div class="name">好房拓 4.0.0 iconfont_短信</div>
<div class="code-name">#iconhaofangtuo400iconfontduanxin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconnavicon-ywcs"></use>
</svg>
<div class="name">业务参数</div>
<div class="code-name">#iconnavicon-ywcs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconliebiao"></use>
</svg>
<div class="name">列表</div>
<div class="code-name">#iconliebiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbianji"></use>
</svg>
<div class="name">编辑</div>
<div class="code-name">#iconbianji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyoujian"></use>
</svg>
<div class="name">邮件</div>
<div class="code-name">#iconyoujian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshejiaodingding"></use>
</svg>
<div class="name">社交钉钉</div>
<div class="code-name">#iconshejiaodingding</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzidianguanli"></use>
</svg>
<div class="name">字典管理</div>
<div class="code-name">#iconzidianguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontubiao"></use>
</svg>
<div class="name">图表</div>
<div class="code-name">#icontubiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondingding"></use>
</svg>
<div class="name">钉钉</div>
<div class="code-name">#icondingding</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconduanxin"></use>
</svg>
<div class="name">短信</div>
<div class="code-name">#iconduanxin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondirectmailyoujiantuisong"></use>
</svg>
<div class="name">directmail 邮件推送</div>
<div class="code-name">#icondirectmailyoujiantuisong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshebeisheshi"></use>
</svg>
<div class="name">设备设施</div>
<div class="code-name">#iconshebeisheshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontongzhi"></use>
</svg>
<div class="name">通知</div>
<div class="code-name">#icontongzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconrizhi"></use>
</svg>
<div class="name">日志</div>
<div class="code-name">#iconrizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchufaqipeizhi-hui"></use>
</svg>
<div class="name">触发器配置-灰</div>
<div class="code-name">#iconchufaqipeizhi-hui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconvcsshijuejisuanfuwu"></use>
</svg>
<div class="name">vcs 视觉计算服务</div>
<div class="code-name">#iconvcsshijuejisuanfuwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbar_icon_shebei"></use>
</svg>
<div class="name">设备</div>
<div class="code-name">#iconbar_icon_shebei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconuser-before"></use>
</svg>
<div class="name">user-before</div>
<div class="code-name">#iconuser-before</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconkemuweihutubiao"></use>
</svg>
<div class="name">科目维护图标</div>
<div class="code-name">#iconkemuweihutubiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconaccounting-subjects"></use>
</svg>
<div class="name">会计科目维护</div>
<div class="code-name">#iconaccounting-subjects</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconRectangleCopy"></use>
</svg>
<div class="name">成本查询</div>
<div class="code-name">#iconRectangleCopy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchengbenshujuguanli"></use>
</svg>
<div class="name">成本数据管理</div>
<div class="code-name">#iconchengbenshujuguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjibenshuju"></use>
</svg>
<div class="name">基本数据</div>
<div class="code-name">#iconjibenshuju</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconB-shengshiqu"></use>
</svg>
<div class="name">B-省市区</div>
<div class="code-name">#iconB-shengshiqu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuzhijigou"></use>
</svg>
<div class="name">组织机构</div>
<div class="code-name">#iconzuzhijigou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconanniu"></use>
</svg>
<div class="name">按钮</div>
<div class="code-name">#iconanniu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconcaidan2"></use>
</svg>
<div class="name">菜单</div>
<div class="code-name">#iconcaidan2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwenhao"></use>
</svg>
<div class="name">问号</div>
<div class="code-name">#iconwenhao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconlajitong"></use>
</svg>
<div class="name">垃圾桶</div>
<div class="code-name">#iconlajitong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhongzhimima"></use>
</svg>
<div class="name">重置密码</div>
<div class="code-name">#iconzhongzhimima</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshezhi"></use>
</svg>
<div class="name">设置</div>
<div class="code-name">#iconshezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhongzhuan"></use>
</svg>
<div class="name">中转</div>
<div class="code-name">#iconzhongzhuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconadd"></use>
</svg>
<div class="name">add</div>
<div class="code-name">#iconadd</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconminus"></use>
</svg>
<div class="name">minus</div>
<div class="code-name">#iconminus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpassword"></use>
</svg>
<div class="name">password</div>
<div class="code-name">#iconpassword</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyonghu"></use>
</svg>
<div class="name">用户</div>
<div class="code-name">#iconyonghu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconquanxian"></use>
</svg>
<div class="name">权限</div>
<div class="code-name">#iconquanxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjiaose1"></use>
</svg>
<div class="name">角色</div>
<div class="code-name">#iconjiaose1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzidian"></use>
</svg>
<div class="name">字典</div>
<div class="code-name">#iconzidian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconcssz"></use>
</svg>
<div class="name">参数设置</div>
<div class="code-name">#iconcssz</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbianji1"></use>
</svg>
<div class="name">编辑</div>
<div class="code-name">#iconbianji1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondfzq-"></use>
</svg>
<div class="name">用户权限</div>
<div class="code-name">#icondfzq-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfenxiang"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#iconfenxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouquan1"></use>
</svg>
<div class="name">授权</div>
<div class="code-name">#iconshouquan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjiantou"></use>
</svg>
<div class="name">左箭头</div>
<div class="code-name">#iconjiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjiantou-copy-copy"></use>
</svg>
<div class="name">左箭头</div>
<div class="code-name">#iconjiantou-copy-copy</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink