efview
Version:
A high quality Service UI components Library with Vue.js
2,421 lines • 88.5 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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=4464454" 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"></span>
<div class="name">按钮-报批单</div>
<div class="code-name">&#xe707;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">树-页面</div>
<div class="code-name">&#xe704;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">树-文件收起</div>
<div class="code-name">&#xe705;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">树-文件展开</div>
<div class="code-name">&#xe706;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">图标-提示</div>
<div class="code-name">&#xe703;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">加签</div>
<div class="code-name">&#xe702;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">工作流-未审批</div>
<div class="code-name">&#xe6fe;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">工作流-撤回</div>
<div class="code-name">&#xe6ff;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">工作流-完成</div>
<div class="code-name">&#xe700;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">工作流-待审批</div>
<div class="code-name">&#xe701;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">输入框-全删</div>
<div class="code-name">&#xe6e1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">附件-下载</div>
<div class="code-name">&#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">附件-撤回</div>
<div class="code-name">&#xe6fb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">附件-查看</div>
<div class="code-name">&#xe6fc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">附件-删除</div>
<div class="code-name">&#xe6fd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">上传</div>
<div class="code-name">&#xe6f9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">审批</div>
<div class="code-name">&#xe6f8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-转正</div>
<div class="code-name">&#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-返回</div>
<div class="code-name">&#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">工作流</div>
<div class="code-name">&#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">数据录入</div>
<div class="code-name">&#xe6dc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-新增子项</div>
<div class="code-name">&#xe6da;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-重置</div>
<div class="code-name">&#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收款</div>
<div class="code-name">&#xe6d0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">撤销发送</div>
<div class="code-name">&#xe6eb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">文件列表</div>
<div class="code-name">&#xe6ec;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量评价</div>
<div class="code-name">&#xe6ed;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量驳回</div>
<div class="code-name">&#xe6ee;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">新会员注册</div>
<div class="code-name">&#xe6ef;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量生成商户管理员</div>
<div class="code-name">&#xe6f0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">报废报失</div>
<div class="code-name">&#xe6f1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提交商户</div>
<div class="code-name">&#xe6f2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">排序设置</div>
<div class="code-name">&#xe6f3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加</div>
<div class="code-name">&#xe6f4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除</div>
<div class="code-name">&#xe6f5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">支付密码重置</div>
<div class="code-name">&#xe6db;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">损溢</div>
<div class="code-name">&#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">指标比对</div>
<div class="code-name">&#xe6e6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">撤场</div>
<div class="code-name">&#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">数据导出</div>
<div class="code-name">&#xe6e8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收审</div>
<div class="code-name">&#xe6e9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-新增配置</div>
<div class="code-name">&#xe6e3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-模板打印</div>
<div class="code-name">&#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-删除配置</div>
<div class="code-name">&#xe6e5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量新增</div>
<div class="code-name">&#xe6d7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-下载导入模板</div>
<div class="code-name">&#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量修改</div>
<div class="code-name">&#xe6d9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-新增明细</div>
<div class="code-name">&#xe6de;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-新增本项</div>
<div class="code-name">&#xe6df;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-招商指标</div>
<div class="code-name">&#xe6e0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-删除明细</div>
<div class="code-name">&#xe6e2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-转正申请</div>
<div class="code-name">&#xe6ce;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量删除</div>
<div class="code-name">&#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-导入模板</div>
<div class="code-name">&#xe6d1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">帮助中心</div>
<div class="code-name">&#xe6d2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-打印初始化</div>
<div class="code-name">&#xe6d3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">批量审核</div>
<div class="code-name">&#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">自定义</div>
<div class="code-name">&#xe6d6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-删行</div>
<div class="code-name">&#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-导入</div>
<div class="code-name">&#xe6c4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-指标对比</div>
<div class="code-name">&#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-上一单</div>
<div class="code-name">&#xe6c6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-增行</div>
<div class="code-name">&#xe6cc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-收入预算</div>
<div class="code-name">&#xe6cd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-下一单</div>
<div class="code-name">&#xe6c2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-添加排序</div>
<div class="code-name">&#xe6c1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-撤回</div>
<div class="code-name">&#xe6b4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-提交</div>
<div class="code-name">&#xe6b5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-打印</div>
<div class="code-name">&#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-清除</div>
<div class="code-name">&#xe6b7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-取消</div>
<div class="code-name">&#xe6b8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-驳回</div>
<div class="code-name">&#xe6b9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-导出</div>
<div class="code-name">&#xe6ba;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-修改</div>
<div class="code-name">&#xe6bb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-停用</div>
<div class="code-name">&#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-删除</div>
<div class="code-name">&#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-保存</div>
<div class="code-name">&#xe6be;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-启用</div>
<div class="code-name">&#xe6bf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-复制</div>
<div class="code-name">&#xe6c0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-审核</div>
<div class="code-name">&#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-延期</div>
<div class="code-name">&#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-查询</div>
<div class="code-name">&#xe6a7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">按钮-预览</div>
<div class="code-name">&#xe6b3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">置顶</div>
<div class="code-name">&#xe6b0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">排序</div>
<div class="code-name">&#xe6b1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">冻结</div>
<div class="code-name">&#xe6cb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">标题-删除</div>
<div class="code-name">&#xe6c9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">标题-撤销</div>
<div class="code-name">&#xe6ca;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除条件</div>
<div class="code-name">&#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加条件</div>
<div class="code-name">&#xe6c8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">excel文件</div>
<div class="code-name">&#xe6b2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">明细删除</div>
<div class="code-name">&#xe6ae;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">明细添加</div>
<div class="code-name">&#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">展开</div>
<div class="code-name">&#xe6aa;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收起</div>
<div class="code-name">&#xe6ab;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">新增</div>
<div class="code-name">&#xe6a4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">筛选</div>
<div class="code-name">&#xe6a3;</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=1715911534198') format('woff2'),
url('iconfont.woff?t=1715911534198') format('woff'),
url('iconfont.ttf?t=1715911534198') format('truetype'),
url('iconfont.svg?t=1715911534198#iconfont') format('svg');
}
</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"
><span class="iconfont">&#x33;</span>
</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 icon-custom-baopidan"></span>
<div class="name">
按钮-报批单
</div>
<div class="code-name">.icon-custom-baopidan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-yemian"></span>
<div class="name">
树-页面
</div>
<div class="code-name">.icon-custom-yemian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-wenjianshouqi"></span>
<div class="name">
树-文件收起
</div>
<div class="code-name">.icon-custom-wenjianshouqi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-wenjianzhankai"></span>
<div class="name">
树-文件展开
</div>
<div class="code-name">.icon-custom-wenjianzhankai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-tishi"></span>
<div class="name">
图标-提示
</div>
<div class="code-name">.icon-custom-tishi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-jiaqian"></span>
<div class="name">
加签
</div>
<div class="code-name">.icon-custom-jiaqian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-weishenpi"></span>
<div class="name">
工作流-未审批
</div>
<div class="code-name">.icon-custom-weishenpi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-chehui"></span>
<div class="name">
工作流-撤回
</div>
<div class="code-name">.icon-custom-chehui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-wancheng"></span>
<div class="name">
工作流-完成
</div>
<div class="code-name">.icon-custom-wancheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-daishenpi"></span>
<div class="name">
工作流-待审批
</div>
<div class="code-name">.icon-custom-daishenpi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-quanshan"></span>
<div class="name">
输入框-全删
</div>
<div class="code-name">.icon-custom-quanshan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-filedown"></span>
<div class="name">
附件-下载
</div>
<div class="code-name">.icon-custom-filedown
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-filerecall"></span>
<div class="name">
附件-撤回
</div>
<div class="code-name">.icon-custom-filerecall
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-filesearch"></span>
<div class="name">
附件-查看
</div>
<div class="code-name">.icon-custom-filesearch
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-filedel"></span>
<div class="name">
附件-删除
</div>
<div class="code-name">.icon-custom-filedel
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-fileupload"></span>
<div class="name">
上传
</div>
<div class="code-name">.icon-custom-fileupload
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-approve"></span>
<div class="name">
审批
</div>
<div class="code-name">.icon-custom-approve
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-become"></span>
<div class="name">
按钮-转正
</div>
<div class="code-name">.icon-custom-become
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-back"></span>
<div class="name">
按钮-返回
</div>
<div class="code-name">.icon-custom-back
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-flow"></span>
<div class="name">
工作流
</div>
<div class="code-name">.icon-custom-flow
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-shujuluru"></span>
<div class="name">
数据录入
</div>
<div class="code-name">.icon-custom-shujuluru
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-addsub"></span>
<div class="name">
按钮-新增子项
</div>
<div class="code-name">.icon-custom-addsub
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-reset"></span>
<div class="name">
按钮-重置
</div>
<div class="code-name">.icon-custom-reset
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-shoukuan"></span>
<div class="name">
收款
</div>
<div class="code-name">.icon-custom-shoukuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-cancelsend"></span>
<div class="name">
撤销发送
</div>
<div class="code-name">.icon-custom-cancelsend
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-folder"></span>
<div class="name">
文件列表
</div>
<div class="code-name">.icon-custom-folder
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchappraise"></span>
<div class="name">
批量评价
</div>
<div class="code-name">.icon-custom-batchappraise
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchreject"></span>
<div class="name">
批量驳回
</div>
<div class="code-name">.icon-custom-batchreject
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-memreg"></span>
<div class="name">
新会员注册
</div>
<div class="code-name">.icon-custom-memreg
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchaddadmin"></span>
<div class="name">
批量生成商户管理员
</div>
<div class="code-name">.icon-custom-batchaddadmin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-baofeibaoshi"></span>
<div class="name">
报废报失
</div>
<div class="code-name">.icon-custom-baofeibaoshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-submitshop"></span>
<div class="name">
提交商户
</div>
<div class="code-name">.icon-custom-submitshop
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-sortset"></span>
<div class="name">
排序设置
</div>
<div class="code-name">.icon-custom-sortset
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-rowadd3"></span>
<div class="name">
添加
</div>
<div class="code-name">.icon-custom-rowadd3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-rowdel3"></span>
<div class="name">
删除
</div>
<div class="code-name">.icon-custom-rowdel3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-passwordreset"></span>
<div class="name">
支付密码重置
</div>
<div class="code-name">.icon-custom-passwordreset
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-sunyi"></span>
<div class="name">
损溢
</div>
<div class="code-name">.icon-custom-sunyi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-zhibiaobidui"></span>
<div class="name">
指标比对
</div>
<div class="code-name">.icon-custom-zhibiaobidui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-chechang"></span>
<div class="name">
撤场
</div>
<div class="code-name">.icon-custom-chechang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-exportdata"></span>
<div class="name">
数据导出
</div>
<div class="code-name">.icon-custom-exportdata
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-shoushen"></span>
<div class="name">
收审
</div>
<div class="code-name">.icon-custom-shoushen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-addconfig"></span>
<div class="name">
按钮-新增配置
</div>
<div class="code-name">.icon-custom-addconfig
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-masterplateprint"></span>
<div class="name">
按钮-模板打印
</div>
<div class="code-name">.icon-custom-masterplateprint
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-delconfig"></span>
<div class="name">
按钮-删除配置
</div>
<div class="code-name">.icon-custom-delconfig
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchadd"></span>
<div class="name">
批量新增
</div>
<div class="code-name">.icon-custom-batchadd
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-downtemplate2"></span>
<div class="name">
按钮-下载导入模板
</div>
<div class="code-name">.icon-custom-downtemplate2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchedit"></span>
<div class="name">
批量修改
</div>
<div class="code-name">.icon-custom-batchedit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-adddetail"></span>
<div class="name">
按钮-新增明细
</div>
<div class="code-name">.icon-custom-adddetail
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-additem"></span>
<div class="name">
按钮-新增本项
</div>
<div class="code-name">.icon-custom-additem
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-invquota"></span>
<div class="name">
按钮-招商指标
</div>
<div class="code-name">.icon-custom-invquota
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-deldetail"></span>
<div class="name">
按钮-删除明细
</div>
<div class="code-name">.icon-custom-deldetail
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-becomeapply"></span>
<div class="name">
按钮-转正申请
</div>
<div class="code-name">.icon-custom-becomeapply
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchdel"></span>
<div class="name">
批量删除
</div>
<div class="code-name">.icon-custom-batchdel
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-downtemplate"></span>
<div class="name">
按钮-导入模板
</div>
<div class="code-name">.icon-custom-downtemplate
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-help"></span>
<div class="name">
帮助中心
</div>
<div class="code-name">.icon-custom-help
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-masterplateinit"></span>
<div class="name">
按钮-打印初始化
</div>
<div class="code-name">.icon-custom-masterplateinit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-batchaudit"></span>
<div class="name">
批量审核
</div>
<div class="code-name">.icon-custom-batchaudit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-colset"></span>
<div class="name">
自定义
</div>
<div class="code-name">.icon-custom-colset
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-del2"></span>
<div class="name">
按钮-删行
</div>
<div class="code-name">.icon-custom-del2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-import"></span>
<div class="name">
按钮-导入
</div>
<div class="code-name">.icon-custom-import
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-indexcontrast"></span>
<div class="name">
按钮-指标对比
</div>
<div class="code-name">.icon-custom-indexcontrast
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-pre"></span>
<div class="name">
按钮-上一单
</div>
<div class="code-name">.icon-custom-pre
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-add2"></span>
<div class="name">
按钮-增行
</div>
<div class="code-name">.icon-custom-add2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-revenuebudget"></span>
<div class="name">
按钮-收入预算
</div>
<div class="code-name">.icon-custom-revenuebudget
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-next"></span>
<div class="name">
按钮-下一单
</div>
<div class="code-name">.icon-custom-next
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-addsort"></span>
<div class="name">
按钮-添加排序
</div>
<div class="code-name">.icon-custom-addsort
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-recall"></span>
<div class="name">
按钮-撤回
</div>
<div class="code-name">.icon-custom-recall
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-submit"></span>
<div class="name">
按钮-提交
</div>
<div class="code-name">.icon-custom-submit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-print"></span>
<div class="name">
按钮-打印
</div>
<div class="code-name">.icon-custom-print
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-clean"></span>
<div class="name">
按钮-清除
</div>
<div class="code-name">.icon-custom-clean
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-cancel"></span>
<div class="name">
按钮-取消
</div>
<div class="code-name">.icon-custom-cancel
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-reject"></span>
<div class="name">
按钮-驳回
</div>
<div class="code-name">.icon-custom-reject
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-export"></span>
<div class="name">
按钮-导出
</div>
<div class="code-name">.icon-custom-export
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-edit"></span>
<div class="name">
按钮-修改
</div>
<div class="code-name">.icon-custom-edit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-blockup"></span>
<div class="name">
按钮-停用
</div>
<div class="code-name">.icon-custom-blockup
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-del"></span>
<div class="name">
按钮-删除
</div>
<div class="code-name">.icon-custom-del
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-save"></span>
<div class="name">
按钮-保存
</div>
<div class="code-name">.icon-custom-save
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-startusing"></span>
<div class="name">
按钮-启用
</div>
<div class="code-name">.icon-custom-startusing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-copy"></span>
<div class="name">
按钮-复制
</div>
<div class="code-name">.icon-custom-copy
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-audit"></span>
<div class="name">
按钮-审核
</div>
<div class="code-name">.icon-custom-audit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-delay"></span>
<div class="name">
按钮-延期
</div>
<div class="code-name">.icon-custom-delay
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-search"></span>
<div class="name">
按钮-查询
</div>
<div class="code-name">.icon-custom-search
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-preview"></span>
<div class="name">
按钮-预览
</div>
<div class="code-name">.icon-custom-preview
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-stick"></span>
<div class="name">
置顶
</div>
<div class="code-name">.icon-custom-stick
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-sort"></span>
<div class="name">
排序
</div>
<div class="code-name">.icon-custom-sort
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-fixed"></span>
<div class="name">
冻结
</div>
<div class="code-name">.icon-custom-fixed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-delcard"></span>
<div class="name">
标题-删除
</div>
<div class="code-name">.icon-custom-delcard
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-recallcard"></span>
<div class="name">
标题-撤销
</div>
<div class="code-name">.icon-custom-recallcard
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-delcond"></span>
<div class="name">
删除条件
</div>
<div class="code-name">.icon-custom-delcond
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-addcond"></span>
<div class="name">
添加条件
</div>
<div class="code-name">.icon-custom-addcond
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-excel"></span>
<div class="name">
excel文件
</div>
<div class="code-name">.icon-custom-excel
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-rowdel"></span>
<div class="name">
明细删除
</div>
<div class="code-name">.icon-custom-rowdel
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-rowadd"></span>
<div class="name">
明细添加
</div>
<div class="code-name">.icon-custom-rowadd
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-spread"></span>
<div class="name">
展开
</div>
<div class="code-name">.icon-custom-spread
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-pack"></span>
<div class="name">
收起
</div>
<div class="code-name">.icon-custom-pack
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-add"></span>
<div class="name">
新增
</div>
<div class="code-name">.icon-custom-add
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-custom-filter"></span>
<div class="name">
筛选
</div>
<div class="code-name">.icon-custom-filter
</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"><link rel="stylesheet" href="./iconfont.css">
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
</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="#icon-custom-baopidan"></use>
</svg>
<div class="name">按钮-报批单</div>
<div class="code-name">#icon-custom-baopidan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-yemian"></use>
</svg>
<div class="name">树-页面</div>
<div class="code-name">#icon-custom-yemian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-wenjianshouqi"></use>
</svg>
<div class="name">树-文件收起</div>
<div class="code-name">#icon-custom-wenjianshouqi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-wenjianzhankai"></use>
</svg>
<div class="name">树-文件展开</div>
<div class="code-name">#icon-custom-wenjianzhankai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-tishi"></use>
</svg>
<div class="name">图标-提示</div>
<div class="code-name">#icon-custom-tishi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-jiaqian"></use>
</svg>
<div class="name">加签</div>
<div class="code-name">#icon-custom-jiaqian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-weishenpi"></use>
</svg>
<div class="name">工作流-未审批</div>
<div class="code-name">#icon-custom-weishenpi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-chehui"></use>
</svg>
<div class="name">工作流-撤回</div>
<div class="code-name">#icon-custom-chehui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-wancheng"></use>
</svg>
<div class="name">工作流-完成</div>
<div class="code-name">#icon-custom-wancheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-daishenpi"></use>
</svg>
<div class="name">工作流-待审批</div>
<div class="code-name">#icon-custom-daishenpi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-quanshan"></use>
</svg>
<div class="name">输入框-全删</div>
<div class="code-name">#icon-custom-quanshan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-filedown"></use>
</svg>
<div class="name">附件-下载</div>
<div class="code-name">#icon-custom-filedown</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-filerecall"></use>
</svg>
<div class="name">附件-撤回</div>
<div class="code-name">#icon-custom-filerecall</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-filesearch"></use>
</svg>
<div class="name">附件-查看</div>
<div class="code-name">#icon-custom-filesearch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-filedel"></use>
</svg>
<div class="name">附件-删除</div>
<div class="code-name">#icon-custom-filedel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-fileupload"></use>
</svg>
<div class="name">上传</div>
<div class="code-name">#icon-custom-fileupload</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-approve"></use>
</svg>
<div class="name">审批</div>
<div class="code-name">#icon-custom-approve</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-become"></use>
</svg>
<div class="name">按钮-转正</div>
<div class="code-name">#icon-custom-become</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-back"></use>
</svg>
<div class="name">按钮-返回</div>
<div class="code-name">#icon-custom-back</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-flow"></use>
</svg>
<div class="name">工作流</div>
<div class="code-name">#icon-custom-flow</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-shujuluru"></use>
</svg>
<div class="name">数据录入</div>
<div class="code-name">#icon-custom-shujuluru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-addsub"></use>
</svg>
<div class="name">按钮-新增子项</div>
<div class="code-name">#icon-custom-addsub</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-reset"></use>
</svg>
<div class="name">按钮-重置</div>
<div class="code-name">#icon-custom-reset</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-shoukuan"></use>
</svg>
<div class="name">收款</div>
<div class="code-name">#icon-custom-shoukuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-cancelsend"></use>
</svg>
<div class="name">撤销发送</div>
<div class="code-name">#icon-custom-cancelsend</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-folder"></use>
</svg>
<div class="name">文件列表</div>
<div class="code-name">#icon-custom-folder</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchappraise"></use>
</svg>
<div class="name">批量评价</div>
<div class="code-name">#icon-custom-batchappraise</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchreject"></use>
</svg>
<div class="name">批量驳回</div>
<div class="code-name">#icon-custom-batchreject</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-memreg"></use>
</svg>
<div class="name">新会员注册</div>
<div class="code-name">#icon-custom-memreg</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchaddadmin"></use>
</svg>
<div class="name">批量生成商户管理员</div>
<div class="code-name">#icon-custom-batchaddadmin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-baofeibaoshi"></use>
</svg>
<div class="name">报废报失</div>
<div class="code-name">#icon-custom-baofeibaoshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-submitshop"></use>
</svg>
<div class="name">提交商户</div>
<div class="code-name">#icon-custom-submitshop</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-sortset"></use>
</svg>
<div class="name">排序设置</div>
<div class="code-name">#icon-custom-sortset</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-rowadd3"></use>
</svg>
<div class="name">添加</div>
<div class="code-name">#icon-custom-rowadd3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-rowdel3"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#icon-custom-rowdel3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-passwordreset"></use>
</svg>
<div class="name">支付密码重置</div>
<div class="code-name">#icon-custom-passwordreset</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-sunyi"></use>
</svg>
<div class="name">损溢</div>
<div class="code-name">#icon-custom-sunyi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-zhibiaobidui"></use>
</svg>
<div class="name">指标比对</div>
<div class="code-name">#icon-custom-zhibiaobidui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-chechang"></use>
</svg>
<div class="name">撤场</div>
<div class="code-name">#icon-custom-chechang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-exportdata"></use>
</svg>
<div class="name">数据导出</div>
<div class="code-name">#icon-custom-exportdata</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-shoushen"></use>
</svg>
<div class="name">收审</div>
<div class="code-name">#icon-custom-shoushen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-addconfig"></use>
</svg>
<div class="name">按钮-新增配置</div>
<div class="code-name">#icon-custom-addconfig</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-masterplateprint"></use>
</svg>
<div class="name">按钮-模板打印</div>
<div class="code-name">#icon-custom-masterplateprint</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-delconfig"></use>
</svg>
<div class="name">按钮-删除配置</div>
<div class="code-name">#icon-custom-delconfig</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchadd"></use>
</svg>
<div class="name">批量新增</div>
<div class="code-name">#icon-custom-batchadd</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-downtemplate2"></use>
</svg>
<div class="name">按钮-下载导入模板</div>
<div class="code-name">#icon-custom-downtemplate2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchedit"></use>
</svg>
<div class="name">批量修改</div>
<div class="code-name">#icon-custom-batchedit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-adddetail"></use>
</svg>
<div class="name">按钮-新增明细</div>
<div class="code-name">#icon-custom-adddetail</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-additem"></use>
</svg>
<div class="name">按钮-新增本项</div>
<div class="code-name">#icon-custom-additem</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-invquota"></use>
</svg>
<div class="name">按钮-招商指标</div>
<div class="code-name">#icon-custom-invquota</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-deldetail"></use>
</svg>
<div class="name">按钮-删除明细</div>
<div class="code-name">#icon-custom-deldetail</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-becomeapply"></use>
</svg>
<div class="name">按钮-转正申请</div>
<div class="code-name">#icon-custom-becomeapply</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchdel"></use>
</svg>
<div class="name">批量删除</div>
<div class="code-name">#icon-custom-batchdel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-downtemplate"></use>
</svg>
<div class="name">按钮-导入模板</div>
<div class="code-name">#icon-custom-downtemplate</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-help"></use>
</svg>
<div class="name">帮助中心</div>
<div class="code-name">#icon-custom-help</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-masterplateinit"></use>
</svg>
<div class="name">按钮-打印初始化</div>
<div class="code-name">#icon-custom-masterplateinit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-batchaudit"></use>
</svg>
<div class="name">批量审核</div>
<div class="code-name">#icon-custom-batchaudit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-colset"></use>
</svg>
<div class="name">自定义</div>
<div class="code-name">#icon-custom-colset</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-del2"></use>
</svg>
<div class="name">按钮-删行</div>
<div class="code-name">#icon-custom-del2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-import"></use>
</svg>
<div class="name">按钮-导入</div>
<div class="code-name">#icon-custom-import</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-indexcontrast"></use>
</svg>
<div class="name">按钮-指标对比</div>
<div class="code-name">#icon-custom-indexcontrast</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-pre"></use>
</svg>
<div class="name">按钮-上一单</div>
<div class="code-name">#icon-custom-pre</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-add2"></use>
</svg>
<div class="name">按钮-增行</div>
<div class="code-name">#icon-custom-add2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-revenuebudget"></use>
</svg>
<div class="name">按钮-收入预算</div>
<div class="code-name">#icon-custom-revenuebudget</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-next"></use>
</svg>
<div class="name">按钮-下一单</div>
<div class="code-name">#icon-custom-next</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-addsort"></use>
</svg>
<div class="name">按钮-添加排序</div>
<div class="code-name">#icon-custom-addsort</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-recall"></use>
</svg>
<div class="name">按钮-撤回</div>
<div class="code-name">#icon-custom-recall</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-submit"></use>
</svg>
<div class="name">按钮-提交</div>
<div class="code-name">#icon-custom-submit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-print"></use>
</svg>
<div class="name">按钮-打印</div>
<div class="code-name">#icon-custom-print</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-clean"></use>
</svg>
<div class="name">按钮-清除</div>
<div class="code-name">#icon-custom-clean</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-cancel"></use>
</svg>
<div class="name">按钮-取消</div>
<div class="code-name">#icon-custom-cancel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-reject"></use>
</svg>
<div class="name">按钮-驳回</div>
<div class="code-name">#icon-custom-reject</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-export"></use>
</svg>
<div class="name">按钮-导出</div>
<div class="code-name">#icon-custom-export</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-edit"></use>
</svg>
<div class="name">按钮-修改</div>
<div class="code-name">#icon-custom-edit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-blockup"></use>
</svg>
<div class="name">按钮-停用</div>
<div class="code-name">#icon-custom-blockup</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-del"></use>
</svg>
<div class="name">按钮-删除</div>
<div class="code-name">#icon-custom-del</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-save"></use>
</svg>
<div class="name">按钮-保存</div>
<div class="code-name">#icon-custom-save</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-startusing"></use>
</svg>
<div class="name">按钮-启用</div>
<div class="code-name">#icon-custom-startusing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-copy"></use>
</svg>
<div class="name">按钮-复制</div>
<div class="code-name">#icon-custom-copy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-audit"></use>
</svg>
<div class="name">按钮-审核</div>
<div class="code-name">#icon-custom-audit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-delay"></use>
</svg>
<div class="name">按钮-延期</div>
<div class="code-name">#icon-custom-delay</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-search"></use>
</svg>
<div class="name">按钮-查询</div>
<div class="code-name">#icon-custom-search</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-preview"></use>
</svg>
<div class="name">按钮-预览</div>
<div class="code-name">#icon-custom-preview</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-stick"></use>
</svg>
<div class="name">置顶</div>
<div class="code-name">#icon-custom-stick</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-sort"></use>
</svg>
<div class="name">排序</div>
<div class="code-name">#icon-custom-sort</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-fixed"></use>
</svg>
<div class="name">冻结</div>
<div class="code-name">#icon-custom-fixed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-delcard"></use>
</svg>
<div class="name">标题-删除</div>
<div class="code-name">#icon-custom-delcard</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-recallcard"></use>
</svg>
<div class="name">标题-撤销</div>
<div class="code-name">#icon-custom-recallcard</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-delcond"></use>
</svg>
<div class="name">删除条件</div>
<div class="code-name">#icon-custom-delcond</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-addcond"></use>
</svg>
<div class="name">添加条件</div>
<div class="code-name">#icon-custom-addcond</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-excel"></use>
</svg>
<div class="name">excel文件</div>
<div class="code-name">#icon-custom-excel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-rowdel"></use>
</svg>
<div class="name">明细删除</div>
<div class="code-name">#icon-custom-rowdel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-rowadd"></use>
</svg>
<div class="name">明细添加</div>
<div class="code-name">#icon-custom-rowadd</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-spread"></use>
</svg>
<div class="name">展开</div>
<div class="code-name">#icon-custom-spread</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-pack"></use>
</svg>
<div class="name">收起</div>
<div class="code-name">#icon-custom-pack</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-add"></use>
</svg>
<div class="name">新增</div>
<div class="code-name">#icon-custom-add</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-custom-filter"></use>
</svg>
<div class="name">筛选</div>
<div class="code-name">#icon-custom-filter</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"><script src="./iconfont.js"></script>
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html"><style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
</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>