summaryrefslogtreecommitdiff
path: root/src/assets/iconfont/demo_index.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets/iconfont/demo_index.html')
-rw-r--r--src/assets/iconfont/demo_index.html2166
1 files changed, 2166 insertions, 0 deletions
diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html
new file mode 100644
index 0000000..d45f95c
--- /dev/null
+++ b/src/assets/iconfont/demo_index.html
@@ -0,0 +1,2166 @@
+<!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=4624922" 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 asw-icon">&#xe842;</span>
+ <div class="name">Pending</div>
+ <div class="code-name">&amp;#xe842;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe844;</span>
+ <div class="name">Canceled</div>
+ <div class="code-name">&amp;#xe844;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe845;</span>
+ <div class="name">Failed</div>
+ <div class="code-name">&amp;#xe845;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe843;</span>
+ <div class="name">日历</div>
+ <div class="code-name">&amp;#xe843;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe83f;</span>
+ <div class="name">Passed</div>
+ <div class="code-name">&amp;#xe83f;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe840;</span>
+ <div class="name">cancel</div>
+ <div class="code-name">&amp;#xe840;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe841;</span>
+ <div class="name">retry</div>
+ <div class="code-name">&amp;#xe841;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe83d;</span>
+ <div class="name">Created</div>
+ <div class="code-name">&amp;#xe83d;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe83e;</span>
+ <div class="name">Running</div>
+ <div class="code-name">&amp;#xe83e;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe609;</span>
+ <div class="name">分析</div>
+ <div class="code-name">&amp;#xe609;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe61a;</span>
+ <div class="name">清除</div>
+ <div class="code-name">&amp;#xe61a;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe67f;</span>
+ <div class="name">地球</div>
+ <div class="code-name">&amp;#xe67f;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe67d;</span>
+ <div class="name">数据探索</div>
+ <div class="code-name">&amp;#xe67d;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xea56;</span>
+ <div class="name">断开连接-copy</div>
+ <div class="code-name">&amp;#xea56;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe7db;</span>
+ <div class="name">链接</div>
+ <div class="code-name">&amp;#xe7db;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe929;</span>
+ <div class="name">撤回</div>
+ <div class="code-name">&amp;#xe929;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe66f;</span>
+ <div class="name">加</div>
+ <div class="code-name">&amp;#xe66f;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe837;</span>
+ <div class="name">Graph</div>
+ <div class="code-name">&amp;#xe837;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe838;</span>
+ <div class="name">history</div>
+ <div class="code-name">&amp;#xe838;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe839;</span>
+ <div class="name">分支</div>
+ <div class="code-name">&amp;#xe839;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe834;</span>
+ <div class="name">png(2)</div>
+ <div class="code-name">&amp;#xe834;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe835;</span>
+ <div class="name">json</div>
+ <div class="code-name">&amp;#xe835;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe836;</span>
+ <div class="name">MD格式</div>
+ <div class="code-name">&amp;#xe836;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe833;</span>
+ <div class="name">more</div>
+ <div class="code-name">&amp;#xe833;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe832;</span>
+ <div class="name">location</div>
+ <div class="code-name">&amp;#xe832;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe831;</span>
+ <div class="name">Members</div>
+ <div class="code-name">&amp;#xe831;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe82d;</span>
+ <div class="name">Environments</div>
+ <div class="code-name">&amp;#xe82d;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe82e;</span>
+ <div class="name">文本</div>
+ <div class="code-name">&amp;#xe82e;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe82f;</span>
+ <div class="name">列表</div>
+ <div class="code-name">&amp;#xe82f;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe830;</span>
+ <div class="name">返回</div>
+ <div class="code-name">&amp;#xe830;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe824;</span>
+ <div class="name">文件夹</div>
+ <div class="code-name">&amp;#xe824;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe825;</span>
+ <div class="name">home</div>
+ <div class="code-name">&amp;#xe825;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe826;</span>
+ <div class="name">More</div>
+ <div class="code-name">&amp;#xe826;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe827;</span>
+ <div class="name">busy</div>
+ <div class="code-name">&amp;#xe827;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe828;</span>
+ <div class="name">start</div>
+ <div class="code-name">&amp;#xe828;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe829;</span>
+ <div class="name">添加文件夹(1)</div>
+ <div class="code-name">&amp;#xe829;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe82a;</span>
+ <div class="name">End</div>
+ <div class="code-name">&amp;#xe82a;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe82b;</span>
+ <div class="name">主页(1)</div>
+ <div class="code-name">&amp;#xe82b;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe82c;</span>
+ <div class="name">上传</div>
+ <div class="code-name">&amp;#xe82c;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe823;</span>
+ <div class="name">减</div>
+ <div class="code-name">&amp;#xe823;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe821;</span>
+ <div class="name">back to workspace</div>
+ <div class="code-name">&amp;#xe821;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe822;</span>
+ <div class="name">Users</div>
+ <div class="code-name">&amp;#xe822;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xea55;</span>
+ <div class="name">upload-file</div>
+ <div class="code-name">&amp;#xea55;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe669;</span>
+ <div class="name">android</div>
+ <div class="code-name">&amp;#xe669;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe601;</span>
+ <div class="name">ios</div>
+ <div class="code-name">&amp;#xe601;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe667;</span>
+ <div class="name">code</div>
+ <div class="code-name">&amp;#xe667;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe820;</span>
+ <div class="name">恢复</div>
+ <div class="code-name">&amp;#xe820;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe68c;</span>
+ <div class="name">编辑</div>
+ <div class="code-name">&amp;#xe68c;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe81f;</span>
+ <div class="name">Parsing</div>
+ <div class="code-name">&amp;#xe81f;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe81c;</span>
+ <div class="name">Indexed</div>
+ <div class="code-name">&amp;#xe81c;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe81d;</span>
+ <div class="name">Upload</div>
+ <div class="code-name">&amp;#xe81d;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe81e;</span>
+ <div class="name">Error</div>
+ <div class="code-name">&amp;#xe81e;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe635;</span>
+ <div class="name">pkg</div>
+ <div class="code-name">&amp;#xe635;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe605;</span>
+ <div class="name">sign-out</div>
+ <div class="code-name">&amp;#xe605;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe81b;</span>
+ <div class="name">Search</div>
+ <div class="code-name">&amp;#xe81b;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe817;</span>
+ <div class="name">播放</div>
+ <div class="code-name">&amp;#xe817;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe818;</span>
+ <div class="name">Activity</div>
+ <div class="code-name">&amp;#xe818;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe819;</span>
+ <div class="name">文本切换</div>
+ <div class="code-name">&amp;#xe819;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe81a;</span>
+ <div class="name">筛选</div>
+ <div class="code-name">&amp;#xe81a;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe808;</span>
+ <div class="name">table</div>
+ <div class="code-name">&amp;#xe808;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe809;</span>
+ <div class="name">Remote desktop</div>
+ <div class="code-name">&amp;#xe809;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe80a;</span>
+ <div class="name">View</div>
+ <div class="code-name">&amp;#xe80a;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe80b;</span>
+ <div class="name">down</div>
+ <div class="code-name">&amp;#xe80b;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe80c;</span>
+ <div class="name">Close</div>
+ <div class="code-name">&amp;#xe80c;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe80d;</span>
+ <div class="name">chart</div>
+ <div class="code-name">&amp;#xe80d;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe80e;</span>
+ <div class="name">Temporary Conditions</div>
+ <div class="code-name">&amp;#xe80e;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe80f;</span>
+ <div class="name">Member</div>
+ <div class="code-name">&amp;#xe80f;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe810;</span>
+ <div class="name">collect</div>
+ <div class="code-name">&amp;#xe810;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe811;</span>
+ <div class="name">Delete</div>
+ <div class="code-name">&amp;#xe811;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe812;</span>
+ <div class="name">运行</div>
+ <div class="code-name">&amp;#xe812;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe813;</span>
+ <div class="name">置顶</div>
+ <div class="code-name">&amp;#xe813;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe814;</span>
+ <div class="name">Download</div>
+ <div class="code-name">&amp;#xe814;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe815;</span>
+ <div class="name">明亮</div>
+ <div class="code-name">&amp;#xe815;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe816;</span>
+ <div class="name">Analyze</div>
+ <div class="code-name">&amp;#xe816;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe805;</span>
+ <div class="name">More</div>
+ <div class="code-name">&amp;#xe805;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe806;</span>
+ <div class="name">最大化</div>
+ <div class="code-name">&amp;#xe806;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe807;</span>
+ <div class="name">Personal</div>
+ <div class="code-name">&amp;#xe807;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe804;</span>
+ <div class="name">Add</div>
+ <div class="code-name">&amp;#xe804;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe7fd;</span>
+ <div class="name">Pcaps</div>
+ <div class="code-name">&amp;#xe7fd;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe7fe;</span>
+ <div class="name">Playbooks</div>
+ <div class="code-name">&amp;#xe7fe;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe7ff;</span>
+ <div class="name">Signatures</div>
+ <div class="code-name">&amp;#xe7ff;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe800;</span>
+ <div class="name">Runners</div>
+ <div class="code-name">&amp;#xe800;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe801;</span>
+ <div class="name">Packages</div>
+ <div class="code-name">&amp;#xe801;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe802;</span>
+ <div class="name">Jobs</div>
+ <div class="code-name">&amp;#xe802;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe803;</span>
+ <div class="name">Applications</div>
+ <div class="code-name">&amp;#xe803;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon">&#xe7fc;</span>
+ <div class="name">Workbooks</div>
+ <div class="code-name">&amp;#xe7fc;</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: 'asw-icon';
+ src: url('iconfont.woff2?t=1729586596014') format('woff2'),
+ url('iconfont.woff?t=1729586596014') format('woff'),
+ url('iconfont.ttf?t=1729586596014') format('truetype');
+}
+</code></pre>
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.asw-icon {
+ font-family: "asw-icon" !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="asw-icon"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+ <blockquote>
+ <p>"asw-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+ </blockquote>
+ </div>
+ </div>
+ <div class="content font-class">
+ <ul class="icon_lists dib-box">
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Pending"></span>
+ <div class="name">
+ Pending
+ </div>
+ <div class="code-name">.icon-Pending
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Canceled"></span>
+ <div class="name">
+ Canceled
+ </div>
+ <div class="code-name">.icon-Canceled
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Failed"></span>
+ <div class="name">
+ Failed
+ </div>
+ <div class="code-name">.icon-Failed
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-rili1"></span>
+ <div class="name">
+ 日历
+ </div>
+ <div class="code-name">.icon-rili1
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Passed"></span>
+ <div class="name">
+ Passed
+ </div>
+ <div class="code-name">.icon-Passed
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-cancel"></span>
+ <div class="name">
+ cancel
+ </div>
+ <div class="code-name">.icon-cancel
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-retry"></span>
+ <div class="name">
+ retry
+ </div>
+ <div class="code-name">.icon-retry
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Created"></span>
+ <div class="name">
+ Created
+ </div>
+ <div class="code-name">.icon-Created
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Running"></span>
+ <div class="name">
+ Running
+ </div>
+ <div class="code-name">.icon-Running
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-fenxi"></span>
+ <div class="name">
+ 分析
+ </div>
+ <div class="code-name">.icon-fenxi
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-qingchu"></span>
+ <div class="name">
+ 清除
+ </div>
+ <div class="code-name">.icon-qingchu
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Vector"></span>
+ <div class="name">
+ 地球
+ </div>
+ <div class="code-name">.icon-Vector
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-shujutansuo"></span>
+ <div class="name">
+ 数据探索
+ </div>
+ <div class="code-name">.icon-shujutansuo
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-duankailianjie"></span>
+ <div class="name">
+ 断开连接-copy
+ </div>
+ <div class="code-name">.icon-duankailianjie
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-lianjie"></span>
+ <div class="name">
+ 链接
+ </div>
+ <div class="code-name">.icon-lianjie
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-chehui"></span>
+ <div class="name">
+ 撤回
+ </div>
+ <div class="code-name">.icon-chehui
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-jia"></span>
+ <div class="name">
+ 加
+ </div>
+ <div class="code-name">.icon-jia
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Graph"></span>
+ <div class="name">
+ Graph
+ </div>
+ <div class="code-name">.icon-Graph
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-history"></span>
+ <div class="name">
+ history
+ </div>
+ <div class="code-name">.icon-history
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-fenzhi"></span>
+ <div class="name">
+ 分支
+ </div>
+ <div class="code-name">.icon-fenzhi
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-a-png2"></span>
+ <div class="name">
+ png(2)
+ </div>
+ <div class="code-name">.icon-a-png2
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-json"></span>
+ <div class="name">
+ json
+ </div>
+ <div class="code-name">.icon-json
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-MDgeshi"></span>
+ <div class="name">
+ MD格式
+ </div>
+ <div class="code-name">.icon-MDgeshi
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-more"></span>
+ <div class="name">
+ more
+ </div>
+ <div class="code-name">.icon-more
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-location"></span>
+ <div class="name">
+ location
+ </div>
+ <div class="code-name">.icon-location
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Members"></span>
+ <div class="name">
+ Members
+ </div>
+ <div class="code-name">.icon-Members
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Environments"></span>
+ <div class="name">
+ Environments
+ </div>
+ <div class="code-name">.icon-Environments
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-wenben"></span>
+ <div class="name">
+ 文本
+ </div>
+ <div class="code-name">.icon-wenben
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-liebiao"></span>
+ <div class="name">
+ 列表
+ </div>
+ <div class="code-name">.icon-liebiao
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-fanhui"></span>
+ <div class="name">
+ 返回
+ </div>
+ <div class="code-name">.icon-fanhui
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-wenjianjia"></span>
+ <div class="name">
+ 文件夹
+ </div>
+ <div class="code-name">.icon-wenjianjia
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-home"></span>
+ <div class="name">
+ home
+ </div>
+ <div class="code-name">.icon-home
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-More1"></span>
+ <div class="name">
+ More
+ </div>
+ <div class="code-name">.icon-More1
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-busy"></span>
+ <div class="name">
+ busy
+ </div>
+ <div class="code-name">.icon-busy
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-start"></span>
+ <div class="name">
+ start
+ </div>
+ <div class="code-name">.icon-start
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-a-tianjiawenjianjia1"></span>
+ <div class="name">
+ 添加文件夹(1)
+ </div>
+ <div class="code-name">.icon-a-tianjiawenjianjia1
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-End"></span>
+ <div class="name">
+ End
+ </div>
+ <div class="code-name">.icon-End
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-a-zhuye1"></span>
+ <div class="name">
+ 主页(1)
+ </div>
+ <div class="code-name">.icon-a-zhuye1
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-shangchuan"></span>
+ <div class="name">
+ 上传
+ </div>
+ <div class="code-name">.icon-shangchuan
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-jian"></span>
+ <div class="name">
+ 减
+ </div>
+ <div class="code-name">.icon-jian
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-a-backtoworkspace"></span>
+ <div class="name">
+ back to workspace
+ </div>
+ <div class="code-name">.icon-a-backtoworkspace
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Users"></span>
+ <div class="name">
+ Users
+ </div>
+ <div class="code-name">.icon-Users
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-upload-file"></span>
+ <div class="name">
+ upload-file
+ </div>
+ <div class="code-name">.icon-upload-file
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-android"></span>
+ <div class="name">
+ android
+ </div>
+ <div class="code-name">.icon-android
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-ios"></span>
+ <div class="name">
+ ios
+ </div>
+ <div class="code-name">.icon-ios
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-code"></span>
+ <div class="name">
+ code
+ </div>
+ <div class="code-name">.icon-code
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-restore"></span>
+ <div class="name">
+ 恢复
+ </div>
+ <div class="code-name">.icon-restore
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-edit"></span>
+ <div class="name">
+ 编辑
+ </div>
+ <div class="code-name">.icon-edit
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Parsing"></span>
+ <div class="name">
+ Parsing
+ </div>
+ <div class="code-name">.icon-Parsing
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Indexed"></span>
+ <div class="name">
+ Indexed
+ </div>
+ <div class="code-name">.icon-Indexed
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Upload"></span>
+ <div class="name">
+ Upload
+ </div>
+ <div class="code-name">.icon-Upload
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Error"></span>
+ <div class="name">
+ Error
+ </div>
+ <div class="code-name">.icon-Error
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-uicon_pkg"></span>
+ <div class="name">
+ pkg
+ </div>
+ <div class="code-name">.icon-uicon_pkg
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-sign-out"></span>
+ <div class="name">
+ sign-out
+ </div>
+ <div class="code-name">.icon-sign-out
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Search"></span>
+ <div class="name">
+ Search
+ </div>
+ <div class="code-name">.icon-Search
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-bofang"></span>
+ <div class="name">
+ 播放
+ </div>
+ <div class="code-name">.icon-bofang
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Activity"></span>
+ <div class="name">
+ Activity
+ </div>
+ <div class="code-name">.icon-Activity
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-wenbenqiehuan"></span>
+ <div class="name">
+ 文本切换
+ </div>
+ <div class="code-name">.icon-wenbenqiehuan
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-shaixuan"></span>
+ <div class="name">
+ 筛选
+ </div>
+ <div class="code-name">.icon-shaixuan
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-table"></span>
+ <div class="name">
+ table
+ </div>
+ <div class="code-name">.icon-table
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-a-Remotedesktop"></span>
+ <div class="name">
+ Remote desktop
+ </div>
+ <div class="code-name">.icon-a-Remotedesktop
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-View"></span>
+ <div class="name">
+ View
+ </div>
+ <div class="code-name">.icon-View
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-down"></span>
+ <div class="name">
+ down
+ </div>
+ <div class="code-name">.icon-down
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Close"></span>
+ <div class="name">
+ Close
+ </div>
+ <div class="code-name">.icon-Close
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-chart"></span>
+ <div class="name">
+ chart
+ </div>
+ <div class="code-name">.icon-chart
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-a-TemporaryConditions"></span>
+ <div class="name">
+ Temporary Conditions
+ </div>
+ <div class="code-name">.icon-a-TemporaryConditions
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Member"></span>
+ <div class="name">
+ Member
+ </div>
+ <div class="code-name">.icon-Member
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-collect"></span>
+ <div class="name">
+ collect
+ </div>
+ <div class="code-name">.icon-collect
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Delete"></span>
+ <div class="name">
+ Delete
+ </div>
+ <div class="code-name">.icon-Delete
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-yunhang"></span>
+ <div class="name">
+ 运行
+ </div>
+ <div class="code-name">.icon-yunhang
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-zhiding"></span>
+ <div class="name">
+ 置顶
+ </div>
+ <div class="code-name">.icon-zhiding
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Download"></span>
+ <div class="name">
+ Download
+ </div>
+ <div class="code-name">.icon-Download
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-mingliang"></span>
+ <div class="name">
+ 明亮
+ </div>
+ <div class="code-name">.icon-mingliang
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Analyze"></span>
+ <div class="name">
+ Analyze
+ </div>
+ <div class="code-name">.icon-Analyze
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-More"></span>
+ <div class="name">
+ More
+ </div>
+ <div class="code-name">.icon-More
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-zuidahua"></span>
+ <div class="name">
+ 最大化
+ </div>
+ <div class="code-name">.icon-zuidahua
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Personal"></span>
+ <div class="name">
+ Personal
+ </div>
+ <div class="code-name">.icon-Personal
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Add"></span>
+ <div class="name">
+ Add
+ </div>
+ <div class="code-name">.icon-Add
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Pcaps"></span>
+ <div class="name">
+ Pcaps
+ </div>
+ <div class="code-name">.icon-Pcaps
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Playbooks"></span>
+ <div class="name">
+ Playbooks
+ </div>
+ <div class="code-name">.icon-Playbooks
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Signatures"></span>
+ <div class="name">
+ Signatures
+ </div>
+ <div class="code-name">.icon-Signatures
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Runners"></span>
+ <div class="name">
+ Runners
+ </div>
+ <div class="code-name">.icon-Runners
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Packages"></span>
+ <div class="name">
+ Packages
+ </div>
+ <div class="code-name">.icon-Packages
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Jobs"></span>
+ <div class="name">
+ Jobs
+ </div>
+ <div class="code-name">.icon-Jobs
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Applications"></span>
+ <div class="name">
+ Applications
+ </div>
+ <div class="code-name">.icon-Applications
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon asw-icon icon-Workbooks"></span>
+ <div class="name">
+ Workbooks
+ </div>
+ <div class="code-name">.icon-Workbooks
+ </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="asw-icon icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+ <blockquote>
+ <p>"
+ asw-icon" 是你项目下的 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-Pending"></use>
+ </svg>
+ <div class="name">Pending</div>
+ <div class="code-name">#icon-Pending</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Canceled"></use>
+ </svg>
+ <div class="name">Canceled</div>
+ <div class="code-name">#icon-Canceled</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Failed"></use>
+ </svg>
+ <div class="name">Failed</div>
+ <div class="code-name">#icon-Failed</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-rili1"></use>
+ </svg>
+ <div class="name">日历</div>
+ <div class="code-name">#icon-rili1</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Passed"></use>
+ </svg>
+ <div class="name">Passed</div>
+ <div class="code-name">#icon-Passed</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-cancel"></use>
+ </svg>
+ <div class="name">cancel</div>
+ <div class="code-name">#icon-cancel</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-retry"></use>
+ </svg>
+ <div class="name">retry</div>
+ <div class="code-name">#icon-retry</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Created"></use>
+ </svg>
+ <div class="name">Created</div>
+ <div class="code-name">#icon-Created</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Running"></use>
+ </svg>
+ <div class="name">Running</div>
+ <div class="code-name">#icon-Running</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-fenxi"></use>
+ </svg>
+ <div class="name">分析</div>
+ <div class="code-name">#icon-fenxi</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-qingchu"></use>
+ </svg>
+ <div class="name">清除</div>
+ <div class="code-name">#icon-qingchu</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Vector"></use>
+ </svg>
+ <div class="name">地球</div>
+ <div class="code-name">#icon-Vector</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-shujutansuo"></use>
+ </svg>
+ <div class="name">数据探索</div>
+ <div class="code-name">#icon-shujutansuo</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-duankailianjie"></use>
+ </svg>
+ <div class="name">断开连接-copy</div>
+ <div class="code-name">#icon-duankailianjie</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-lianjie"></use>
+ </svg>
+ <div class="name">链接</div>
+ <div class="code-name">#icon-lianjie</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-chehui"></use>
+ </svg>
+ <div class="name">撤回</div>
+ <div class="code-name">#icon-chehui</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-jia"></use>
+ </svg>
+ <div class="name">加</div>
+ <div class="code-name">#icon-jia</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Graph"></use>
+ </svg>
+ <div class="name">Graph</div>
+ <div class="code-name">#icon-Graph</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-history"></use>
+ </svg>
+ <div class="name">history</div>
+ <div class="code-name">#icon-history</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-fenzhi"></use>
+ </svg>
+ <div class="name">分支</div>
+ <div class="code-name">#icon-fenzhi</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-a-png2"></use>
+ </svg>
+ <div class="name">png(2)</div>
+ <div class="code-name">#icon-a-png2</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-json"></use>
+ </svg>
+ <div class="name">json</div>
+ <div class="code-name">#icon-json</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-MDgeshi"></use>
+ </svg>
+ <div class="name">MD格式</div>
+ <div class="code-name">#icon-MDgeshi</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-more"></use>
+ </svg>
+ <div class="name">more</div>
+ <div class="code-name">#icon-more</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-location"></use>
+ </svg>
+ <div class="name">location</div>
+ <div class="code-name">#icon-location</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Members"></use>
+ </svg>
+ <div class="name">Members</div>
+ <div class="code-name">#icon-Members</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Environments"></use>
+ </svg>
+ <div class="name">Environments</div>
+ <div class="code-name">#icon-Environments</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-wenben"></use>
+ </svg>
+ <div class="name">文本</div>
+ <div class="code-name">#icon-wenben</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-liebiao"></use>
+ </svg>
+ <div class="name">列表</div>
+ <div class="code-name">#icon-liebiao</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-fanhui"></use>
+ </svg>
+ <div class="name">返回</div>
+ <div class="code-name">#icon-fanhui</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-wenjianjia"></use>
+ </svg>
+ <div class="name">文件夹</div>
+ <div class="code-name">#icon-wenjianjia</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-home"></use>
+ </svg>
+ <div class="name">home</div>
+ <div class="code-name">#icon-home</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-More1"></use>
+ </svg>
+ <div class="name">More</div>
+ <div class="code-name">#icon-More1</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-busy"></use>
+ </svg>
+ <div class="name">busy</div>
+ <div class="code-name">#icon-busy</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-start"></use>
+ </svg>
+ <div class="name">start</div>
+ <div class="code-name">#icon-start</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-a-tianjiawenjianjia1"></use>
+ </svg>
+ <div class="name">添加文件夹(1)</div>
+ <div class="code-name">#icon-a-tianjiawenjianjia1</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-End"></use>
+ </svg>
+ <div class="name">End</div>
+ <div class="code-name">#icon-End</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-a-zhuye1"></use>
+ </svg>
+ <div class="name">主页(1)</div>
+ <div class="code-name">#icon-a-zhuye1</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-shangchuan"></use>
+ </svg>
+ <div class="name">上传</div>
+ <div class="code-name">#icon-shangchuan</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-jian"></use>
+ </svg>
+ <div class="name">减</div>
+ <div class="code-name">#icon-jian</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-a-backtoworkspace"></use>
+ </svg>
+ <div class="name">back to workspace</div>
+ <div class="code-name">#icon-a-backtoworkspace</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Users"></use>
+ </svg>
+ <div class="name">Users</div>
+ <div class="code-name">#icon-Users</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-upload-file"></use>
+ </svg>
+ <div class="name">upload-file</div>
+ <div class="code-name">#icon-upload-file</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-android"></use>
+ </svg>
+ <div class="name">android</div>
+ <div class="code-name">#icon-android</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-ios"></use>
+ </svg>
+ <div class="name">ios</div>
+ <div class="code-name">#icon-ios</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-code"></use>
+ </svg>
+ <div class="name">code</div>
+ <div class="code-name">#icon-code</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-restore"></use>
+ </svg>
+ <div class="name">恢复</div>
+ <div class="code-name">#icon-restore</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-edit"></use>
+ </svg>
+ <div class="name">编辑</div>
+ <div class="code-name">#icon-edit</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Parsing"></use>
+ </svg>
+ <div class="name">Parsing</div>
+ <div class="code-name">#icon-Parsing</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Indexed"></use>
+ </svg>
+ <div class="name">Indexed</div>
+ <div class="code-name">#icon-Indexed</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Upload"></use>
+ </svg>
+ <div class="name">Upload</div>
+ <div class="code-name">#icon-Upload</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Error"></use>
+ </svg>
+ <div class="name">Error</div>
+ <div class="code-name">#icon-Error</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-uicon_pkg"></use>
+ </svg>
+ <div class="name">pkg</div>
+ <div class="code-name">#icon-uicon_pkg</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-sign-out"></use>
+ </svg>
+ <div class="name">sign-out</div>
+ <div class="code-name">#icon-sign-out</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Search"></use>
+ </svg>
+ <div class="name">Search</div>
+ <div class="code-name">#icon-Search</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-bofang"></use>
+ </svg>
+ <div class="name">播放</div>
+ <div class="code-name">#icon-bofang</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Activity"></use>
+ </svg>
+ <div class="name">Activity</div>
+ <div class="code-name">#icon-Activity</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-wenbenqiehuan"></use>
+ </svg>
+ <div class="name">文本切换</div>
+ <div class="code-name">#icon-wenbenqiehuan</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-shaixuan"></use>
+ </svg>
+ <div class="name">筛选</div>
+ <div class="code-name">#icon-shaixuan</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-table"></use>
+ </svg>
+ <div class="name">table</div>
+ <div class="code-name">#icon-table</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-a-Remotedesktop"></use>
+ </svg>
+ <div class="name">Remote desktop</div>
+ <div class="code-name">#icon-a-Remotedesktop</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-View"></use>
+ </svg>
+ <div class="name">View</div>
+ <div class="code-name">#icon-View</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-down"></use>
+ </svg>
+ <div class="name">down</div>
+ <div class="code-name">#icon-down</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Close"></use>
+ </svg>
+ <div class="name">Close</div>
+ <div class="code-name">#icon-Close</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-chart"></use>
+ </svg>
+ <div class="name">chart</div>
+ <div class="code-name">#icon-chart</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-a-TemporaryConditions"></use>
+ </svg>
+ <div class="name">Temporary Conditions</div>
+ <div class="code-name">#icon-a-TemporaryConditions</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Member"></use>
+ </svg>
+ <div class="name">Member</div>
+ <div class="code-name">#icon-Member</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-collect"></use>
+ </svg>
+ <div class="name">collect</div>
+ <div class="code-name">#icon-collect</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Delete"></use>
+ </svg>
+ <div class="name">Delete</div>
+ <div class="code-name">#icon-Delete</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-yunhang"></use>
+ </svg>
+ <div class="name">运行</div>
+ <div class="code-name">#icon-yunhang</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-zhiding"></use>
+ </svg>
+ <div class="name">置顶</div>
+ <div class="code-name">#icon-zhiding</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Download"></use>
+ </svg>
+ <div class="name">Download</div>
+ <div class="code-name">#icon-Download</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-mingliang"></use>
+ </svg>
+ <div class="name">明亮</div>
+ <div class="code-name">#icon-mingliang</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Analyze"></use>
+ </svg>
+ <div class="name">Analyze</div>
+ <div class="code-name">#icon-Analyze</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-More"></use>
+ </svg>
+ <div class="name">More</div>
+ <div class="code-name">#icon-More</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-zuidahua"></use>
+ </svg>
+ <div class="name">最大化</div>
+ <div class="code-name">#icon-zuidahua</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Personal"></use>
+ </svg>
+ <div class="name">Personal</div>
+ <div class="code-name">#icon-Personal</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Add"></use>
+ </svg>
+ <div class="name">Add</div>
+ <div class="code-name">#icon-Add</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Pcaps"></use>
+ </svg>
+ <div class="name">Pcaps</div>
+ <div class="code-name">#icon-Pcaps</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Playbooks"></use>
+ </svg>
+ <div class="name">Playbooks</div>
+ <div class="code-name">#icon-Playbooks</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Signatures"></use>
+ </svg>
+ <div class="name">Signatures</div>
+ <div class="code-name">#icon-Signatures</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Runners"></use>
+ </svg>
+ <div class="name">Runners</div>
+ <div class="code-name">#icon-Runners</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Packages"></use>
+ </svg>
+ <div class="name">Packages</div>
+ <div class="code-name">#icon-Packages</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Jobs"></use>
+ </svg>
+ <div class="name">Jobs</div>
+ <div class="code-name">#icon-Jobs</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Applications"></use>
+ </svg>
+ <div class="name">Applications</div>
+ <div class="code-name">#icon-Applications</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-Workbooks"></use>
+ </svg>
+ <div class="name">Workbooks</div>
+ <div class="code-name">#icon-Workbooks</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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-30 16:02:45 +0000