tfp
Version:
A Web UI framework for TaskBuilder
1,473 lines (1,272 loc) • 107 kB
HTML
<!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=3517052" 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">&#xeb67;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">商品管理</div>
<div class="code-name">&#xe696;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">库存</div>
<div class="code-name">&#xe647;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">客户</div>
<div class="code-name">&#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收支分析</div>
<div class="code-name">&#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">采购管理-采购执行</div>
<div class="code-name">&#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">供应商信息</div>
<div class="code-name">&#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">女商家</div>
<div class="code-name">&#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">男</div>
<div class="code-name">&#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">erp-enter</div>
<div class="code-name">&#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-bidding</div>
<div class="code-name">&#xe685;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-expenses</div>
<div class="code-name">&#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-default</div>
<div class="code-name">&#xe687;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-budget</div>
<div class="code-name">&#xe688;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-exchange</div>
<div class="code-name">&#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-receipt</div>
<div class="code-name">&#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-issue</div>
<div class="code-name">&#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-project</div>
<div class="code-name">&#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-teamwork</div>
<div class="code-name">&#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-seal</div>
<div class="code-name">&#xe6a7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-supervise</div>
<div class="code-name">&#xe6a8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-party</div>
<div class="code-name">&#xe6a9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-test</div>
<div class="code-name">&#xe6aa;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">erp-voucher</div>
<div class="code-name">&#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">erp-account</div>
<div class="code-name">&#xe6b0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">erp-balance</div>
<div class="code-name">&#xe6b1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-aftersales</div>
<div class="code-name">&#xe6b2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-car</div>
<div class="code-name">&#xe6b3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-customer</div>
<div class="code-name">&#xe6b4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-chart</div>
<div class="code-name">&#xe6b5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-control</div>
<div class="code-name">&#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-goods</div>
<div class="code-name">&#xe6bb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-invoice</div>
<div class="code-name">&#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-visit</div>
<div class="code-name">&#xe6be;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-systemservice</div>
<div class="code-name">&#xe6c0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-report</div>
<div class="code-name">&#xe6c2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-app</div>
<div class="code-name">&#xe6c4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-blog</div>
<div class="code-name">&#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-sale</div>
<div class="code-name">&#xe6c6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-forum</div>
<div class="code-name">&#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-systemlog</div>
<div class="code-name">&#xe6c8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-signature</div>
<div class="code-name">&#xe6c9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-purchase</div>
<div class="code-name">&#xe6ca;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-systemset</div>
<div class="code-name">&#xe6cb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-systemtask</div>
<div class="code-name">&#xe6cc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-form</div>
<div class="code-name">&#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-query</div>
<div class="code-name">&#xe6ac;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-licence</div>
<div class="code-name">&#xe6ad;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-efficiency</div>
<div class="code-name">&#xe6b7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-record</div>
<div class="code-name">&#xe6b8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-supplier</div>
<div class="code-name">&#xe6b9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-plan</div>
<div class="code-name">&#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-summary</div>
<div class="code-name">&#xe6bf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-recruit</div>
<div class="code-name">&#xe6c1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-manage</div>
<div class="code-name">&#xe6cd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-door</div>
<div class="code-name">&#xe6ab;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-supplies</div>
<div class="code-name">&#xe6ae;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-meeting</div>
<div class="code-name">&#xe6ba;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-study</div>
<div class="code-name">&#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-assets</div>
<div class="code-name">&#xe6ec;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-cockpit</div>
<div class="code-name">&#xe6ef;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-flow</div>
<div class="code-name">&#xe6f2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-hr-entry</div>
<div class="code-name">&#xe6f3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-hr-leave</div>
<div class="code-name">&#xe6f4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-hr-transfer</div>
<div class="code-name">&#xe6f5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-hr-normal</div>
<div class="code-name">&#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-erp-inventory</div>
<div class="code-name">&#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-erp-leave</div>
<div class="code-name">&#xe6f8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-erp-transfer</div>
<div class="code-name">&#xe6f9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-erp-stock</div>
<div class="code-name">&#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-collection</div>
<div class="code-name">&#xe6fb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-reporting</div>
<div class="code-name">&#xe6fc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-assignment</div>
<div class="code-name">&#xe6fd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">payment</div>
<div class="code-name">&#xe6fe;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-work</div>
<div class="code-name">&#xe6ce;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-org</div>
<div class="code-name">&#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-notice</div>
<div class="code-name">&#xe6d0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-news</div>
<div class="code-name">&#xe6d1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-overtime</div>
<div class="code-name">&#xe6d2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-regulations</div>
<div class="code-name">&#xe6d3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-user</div>
<div class="code-name">&#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-questions</div>
<div class="code-name">&#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-schedule</div>
<div class="code-name">&#xe6d6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-salary</div>
<div class="code-name">&#xe6d7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-travel</div>
<div class="code-name">&#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-role</div>
<div class="code-name">&#xe6d9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-addressbook</div>
<div class="code-name">&#xe6da;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-msg</div>
<div class="code-name">&#xe6db;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-achievement</div>
<div class="code-name">&#xe6dc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-file</div>
<div class="code-name">&#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-evaluate</div>
<div class="code-name">&#xe6de;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-contract</div>
<div class="code-name">&#xe6df;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-album</div>
<div class="code-name">&#xe6e1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-goout</div>
<div class="code-name">&#xe6e2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-data</div>
<div class="code-name">&#xe6e3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-diary</div>
<div class="code-name">&#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-leave</div>
<div class="code-name">&#xe6e5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-journal</div>
<div class="code-name">&#xe6e6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-attendance</div>
<div class="code-name">&#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-worked</div>
<div class="code-name">&#xe6e8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-working</div>
<div class="code-name">&#xe6e9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-endwork</div>
<div class="code-name">&#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-startwork</div>
<div class="code-name">&#xe6eb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-replace</div>
<div class="code-name">&#xe6ed;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-reissue</div>
<div class="code-name">&#xe6ff;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-credit</div>
<div class="code-name">&#xe6f0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-debit</div>
<div class="code-name">&#xe6f1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-mail</div>
<div class="code-name">&#xe6e0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app-train</div>
<div class="code-name">&#xe6ee;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">group</div>
<div class="code-name">&#xe700;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">post</div>
<div class="code-name">&#xe701;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">dep</div>
<div class="code-name">&#xe702;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">statistics</div>
<div class="code-name">&#xe719;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">apply</div>
<div class="code-name">&#xe71b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">approve</div>
<div class="code-name">&#xe71e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">get</div>
<div class="code-name">&#xe71f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">insert</div>
<div class="code-name">&#xe720;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">update</div>
<div class="code-name">&#xe721;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">partyandgovernmentsystem</div>
<div class="code-name">&#xe72e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">confidentialdepartment</div>
<div class="code-name">&#xe72f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">informationpublication</div>
<div class="code-name">&#xe72c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">partyandgovernmentsystem-secret</div>
<div class="code-name">&#xe72d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">informationpublication-secret</div>
<div class="code-name">&#xe730;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">confidentialdepartment-secret</div>
<div class="code-name">&#xe731;</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.eot?t=1660009760854'); /* IE9 */
src: url('iconfont.eot?t=1660009760854#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2?t=1660009760854') format('woff2'),
url('iconfont.woff?t=1660009760854') format('woff'),
url('iconfont.ttf?t=1660009760854') format('truetype'),
url('iconfont.svg?t=1660009760854#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-yingyongguanli"></span>
<div class="name">
应用管理
</div>
<div class="code-name">.icon-yingyongguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangpinguanli"></span>
<div class="name">
商品管理
</div>
<div class="code-name">.icon-shangpinguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kucun"></span>
<div class="name">
库存
</div>
<div class="code-name">.icon-kucun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kehu"></span>
<div class="name">
客户
</div>
<div class="code-name">.icon-kehu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouzhifenxi"></span>
<div class="name">
收支分析
</div>
<div class="code-name">.icon-shouzhifenxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caigouguanli-caigouzhihang"></span>
<div class="name">
采购管理-采购执行
</div>
<div class="code-name">.icon-caigouguanli-caigouzhihang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyingshangxinxi"></span>
<div class="name">
供应商信息
</div>
<div class="code-name">.icon-gongyingshangxinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nvshangjia"></span>
<div class="name">
女商家
</div>
<div class="code-name">.icon-nvshangjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nan"></span>
<div class="name">
男
</div>
<div class="code-name">.icon-nan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-enter"></span>
<div class="name">
erp-enter
</div>
<div class="code-name">.icon-erp-enter
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bidding"></span>
<div class="name">
app-bidding
</div>
<div class="code-name">.icon-bidding
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-expenses"></span>
<div class="name">
app-expenses
</div>
<div class="code-name">.icon-expenses
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-default"></span>
<div class="name">
app-default
</div>
<div class="code-name">.icon-default
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-budget"></span>
<div class="name">
app-budget
</div>
<div class="code-name">.icon-budget
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-exchange"></span>
<div class="name">
app-exchange
</div>
<div class="code-name">.icon-exchange
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-receipt"></span>
<div class="name">
app-receipt
</div>
<div class="code-name">.icon-receipt
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-issue"></span>
<div class="name">
app-issue
</div>
<div class="code-name">.icon-issue
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-project"></span>
<div class="name">
app-project
</div>
<div class="code-name">.icon-project
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-teamwork"></span>
<div class="name">
app-teamwork
</div>
<div class="code-name">.icon-teamwork
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-seal"></span>
<div class="name">
app-seal
</div>
<div class="code-name">.icon-seal
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-supervise"></span>
<div class="name">
app-supervise
</div>
<div class="code-name">.icon-supervise
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-party"></span>
<div class="name">
app-party
</div>
<div class="code-name">.icon-party
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-test"></span>
<div class="name">
app-test
</div>
<div class="code-name">.icon-test
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-voucher"></span>
<div class="name">
erp-voucher
</div>
<div class="code-name">.icon-erp-voucher
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-account"></span>
<div class="name">
erp-account
</div>
<div class="code-name">.icon-erp-account
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-balance"></span>
<div class="name">
erp-balance
</div>
<div class="code-name">.icon-erp-balance
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-aftersales"></span>
<div class="name">
app-aftersales
</div>
<div class="code-name">.icon-aftersales
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-car"></span>
<div class="name">
app-car
</div>
<div class="code-name">.icon-car
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-customer"></span>
<div class="name">
app-customer
</div>
<div class="code-name">.icon-customer
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chart"></span>
<div class="name">
app-chart
</div>
<div class="code-name">.icon-chart
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-control"></span>
<div class="name">
app-control
</div>
<div class="code-name">.icon-control
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-goods"></span>
<div class="name">
app-goods
</div>
<div class="code-name">.icon-goods
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-invoice"></span>
<div class="name">
app-invoice
</div>
<div class="code-name">.icon-invoice
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-visit"></span>
<div class="name">
app-visit
</div>
<div class="code-name">.icon-visit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-systemservice"></span>
<div class="name">
app-systemservice
</div>
<div class="code-name">.icon-systemservice
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-report"></span>
<div class="name">
app-report
</div>
<div class="code-name">.icon-report
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-app"></span>
<div class="name">
app-app
</div>
<div class="code-name">.icon-app
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-blog"></span>
<div class="name">
app-blog
</div>
<div class="code-name">.icon-blog
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sale"></span>
<div class="name">
app-sale
</div>
<div class="code-name">.icon-sale
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-forum"></span>
<div class="name">
app-forum
</div>
<div class="code-name">.icon-forum
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-systemlog"></span>
<div class="name">
app-systemlog
</div>
<div class="code-name">.icon-systemlog
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-signature"></span>
<div class="name">
app-signature
</div>
<div class="code-name">.icon-signature
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-purchase"></span>
<div class="name">
app-purchase
</div>
<div class="code-name">.icon-purchase
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-systemset"></span>
<div class="name">
app-systemset
</div>
<div class="code-name">.icon-systemset
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-systemtask"></span>
<div class="name">
app-systemtask
</div>
<div class="code-name">.icon-systemtask
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-form"></span>
<div class="name">
app-form
</div>
<div class="code-name">.icon-form
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-query"></span>
<div class="name">
app-query
</div>
<div class="code-name">.icon-query
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-licence"></span>
<div class="name">
app-licence
</div>
<div class="code-name">.icon-licence
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-efficiency"></span>
<div class="name">
app-efficiency
</div>
<div class="code-name">.icon-efficiency
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-record"></span>
<div class="name">
app-record
</div>
<div class="code-name">.icon-record
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-supplier"></span>
<div class="name">
app-supplier
</div>
<div class="code-name">.icon-supplier
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-plan"></span>
<div class="name">
app-plan
</div>
<div class="code-name">.icon-plan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-summary"></span>
<div class="name">
app-summary
</div>
<div class="code-name">.icon-summary
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-recruit"></span>
<div class="name">
app-recruit
</div>
<div class="code-name">.icon-recruit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-manage"></span>
<div class="name">
app-manage
</div>
<div class="code-name">.icon-manage
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-door"></span>
<div class="name">
app-door
</div>
<div class="code-name">.icon-door
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-supplies"></span>
<div class="name">
app-supplies
</div>
<div class="code-name">.icon-supplies
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-meeting"></span>
<div class="name">
app-meeting
</div>
<div class="code-name">.icon-meeting
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-study"></span>
<div class="name">
app-study
</div>
<div class="code-name">.icon-study
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-assets"></span>
<div class="name">
app-assets
</div>
<div class="code-name">.icon-assets
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cockpit"></span>
<div class="name">
app-cockpit
</div>
<div class="code-name">.icon-cockpit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-flow"></span>
<div class="name">
app-flow
</div>
<div class="code-name">.icon-flow
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hr-entry"></span>
<div class="name">
app-hr-entry
</div>
<div class="code-name">.icon-hr-entry
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hr-leave"></span>
<div class="name">
app-hr-leave
</div>
<div class="code-name">.icon-hr-leave
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hr-transfer"></span>
<div class="name">
app-hr-transfer
</div>
<div class="code-name">.icon-hr-transfer
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hr-normal"></span>
<div class="name">
app-hr-normal
</div>
<div class="code-name">.icon-hr-normal
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-inventory"></span>
<div class="name">
app-erp-inventory
</div>
<div class="code-name">.icon-erp-inventory
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-leave"></span>
<div class="name">
app-erp-leave
</div>
<div class="code-name">.icon-erp-leave
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-transfer"></span>
<div class="name">
app-erp-transfer
</div>
<div class="code-name">.icon-erp-transfer
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erp-stock"></span>
<div c