添加 iconfont

2025-07-05 07:32:45 +08:00 · 2020-07-22 20:42:12 +08:00 · 2020-07-22 20:42:12 +08:00 · dd94066932
commit dd94066932
parent e475c4fd4f
11 changed files with 1059 additions and 0 deletions
--- a/src/assets/plugins/iconfont/demo.css
+++ b/src/assets/plugins/iconfont/demo.css
@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
--- a/src/assets/plugins/iconfont/demo_index.html
+++ b/src/assets/plugins/iconfont/demo_index.html
@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <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>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</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=1959560" 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">&#xe63d;</span>
+                <div class="name">用户</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67b;</span>
+                <div class="name">时间</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67a;</span>
+                <div class="name">文件类型配置</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe78d;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe78d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7a1;</span>
+                <div class="name">编辑</div>
+                <div class="code-name">&amp;#xe7a1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ea;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe7ea;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe654;</span>
+                <div class="name">查看</div>
+                <div class="code-name">&amp;#xe654;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">标签</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用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');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#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"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yonghu"></span>
+            <div class="name">
+              用户
+            </div>
+            <div class="code-name">.icon-yonghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shijian"></span>
+            <div class="name">
+              时间
+            </div>
+            <div class="code-name">.icon-shijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wenjianleixingpeizhi"></span>
+            <div class="name">
+              文件类型配置
+            </div>
+            <div class="code-name">.icon-wenjianleixingpeizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu1"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-shanchu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bianji"></span>
+            <div class="name">
+              编辑
+            </div>
+            <div class="code-name">.icon-bianji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daochu"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icon-daochu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chakan"></span>
+            <div class="name">
+              查看
+            </div>
+            <div class="code-name">.icon-chakan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biaoqian"></span>
+            <div class="name">
+              标签
+            </div>
+            <div class="code-name">.icon-biaoqian
+            </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>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yonghu"></use>
+                </svg>
+                <div class="name">用户</div>
+                <div class="code-name">#icon-yonghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shijian"></use>
+                </svg>
+                <div class="name">时间</div>
+                <div class="code-name">#icon-shijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenjianleixingpeizhi"></use>
+                </svg>
+                <div class="name">文件类型配置</div>
+                <div class="code-name">#icon-wenjianleixingpeizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanchu1"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon-shanchu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianji"></use>
+                </svg>
+                <div class="name">编辑</div>
+                <div class="code-name">#icon-bianji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daochu"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icon-daochu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chakan"></use>
+                </svg>
+                <div class="name">查看</div>
+                <div class="code-name">#icon-chakan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaoqian"></use>
+                </svg>
+                <div class="name">标签</div>
+                <div class="code-name">#icon-biaoqian</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>
--- a/src/assets/plugins/iconfont/iconfont.css
+++ b/src/assets/plugins/iconfont/iconfont.css
@ -0,0 +1,49 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1595400349628'); /* IE9 */
+  src: url('iconfont.eot?t=1595400349628#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1595400349628') format('woff'),
+  url('iconfont.ttf?t=1595400349628') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1595400349628#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-yonghu:before {
+  content: "\e63d";
+}
+
+.icon-shijian:before {
+  content: "\e67b";
+}
+
+.icon-wenjianleixingpeizhi:before {
+  content: "\e67a";
+}
+
+.icon-shanchu1:before {
+  content: "\e78d";
+}
+
+.icon-bianji:before {
+  content: "\e7a1";
+}
+
+.icon-daochu:before {
+  content: "\e7ea";
+}
+
+.icon-chakan:before {
+  content: "\e654";
+}
+
+.icon-biaoqian:before {
+  content: "\e637";
+}
+
--- a/src/assets/plugins/iconfont/iconfont.eot
+++ b/src/assets/plugins/iconfont/iconfont.eot
--- a/src/assets/plugins/iconfont/iconfont.js
+++ b/src/assets/plugins/iconfont/iconfont.js
--- a/src/assets/plugins/iconfont/iconfont.json
+++ b/src/assets/plugins/iconfont/iconfont.json
@ -0,0 +1,65 @@
+{
+  "id": "1959560",
+  "name": "center",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1119364",
+      "name": "用户",
+      "font_class": "yonghu",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "827678",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "6798104",
+      "name": "文件类型配置",
+      "font_class": "wenjianleixingpeizhi",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "3092318",
+      "name": "删除",
+      "font_class": "shanchu1",
+      "unicode": "e78d",
+      "unicode_decimal": 59277
+    },
+    {
+      "icon_id": "4425842",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e7a1",
+      "unicode_decimal": 59297
+    },
+    {
+      "icon_id": "4646388",
+      "name": "导出",
+      "font_class": "daochu",
+      "unicode": "e7ea",
+      "unicode_decimal": 59370
+    },
+    {
+      "icon_id": "14435356",
+      "name": "查看",
+      "font_class": "chakan",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "4251702",
+      "name": "标签",
+      "font_class": "biaoqian",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    }
+  ]
+}
--- a/src/assets/plugins/iconfont/iconfont.svg
+++ b/src/assets/plugins/iconfont/iconfont.svg
@ -0,0 +1,50 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="yonghu" unicode="&#58941;" d="M515.541449 888.917101c-280.359429 0-508.458551-228.120391-508.458551-508.458551s228.120391-508.458551 508.458551-508.458551 508.458551 228.120391 508.458551 508.458551S795.900879 888.917101 515.541449 888.917101zM515.541449-85.864196c-257.132626 0-466.301477 209.190121-466.301477 466.322747 0 257.132626 209.168851 466.322747 466.301477 466.322747s466.301477-209.190121 466.301477-466.322747S772.674075-85.864196 515.541449-85.864196zM614.574414 371.822944 614.574414 371.822944c47.751075 31.96876 79.230625 86.398604 79.230625 148.187857 0 98.437405-79.804915 178.24232-178.24232 178.24232-98.437405 0-178.24232-79.804915-178.24232-178.24232 0-61.810523 31.479551-116.219097 79.251895-148.187857-100.266622-39.519598-171.244501-137.170014-171.244501-251.453545 0-0.23397 0-0.446669 0.02127-0.659369 0-0.04254-0.02127-0.10635-0.02127-0.14889 0-15.612155 12.65563-28.246516 28.267786-28.246516 15.590885 0 21.886796 12.63436 21.886796 28.246516 0 0.340319-0.08508 0.659369-0.10635 1.020958 0.10635 118.005774 102.159649 219.995264 220.207964 219.995264 118.112124 0 220.207964-102.095839 220.207964-220.207964 0-0.14889-1.467628-29.054774 21.971875-29.054774 15.505806 0 28.076356 12.57055 28.076356 28.055086 0 0.06381-0.02127 0.12762-0.02127 0.2127 0 0.25524 0.02127 0.510479 0.02127 0.786989C785.797645 234.65293 714.798496 332.303346 614.574414 371.822944zM515.541449 385.265563c-74.402343 0-134.723968 60.321625-134.723968 134.723968 0 74.423613 60.321625 134.723968 134.723968 134.723968 74.423613 0 134.723968-60.321625 134.723968-134.723968S589.943792 385.265563 515.541449 385.265563z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shijian" unicode="&#59003;" d="M511.735-58.453C268.163-58.453 70 139.7 70 383.265c0 117.925 45.9 228.815 129.25 312.246 4.478 4.49 10.44 6.961 16.789 6.961 6.338 0 12.297-2.463 16.775-6.946 9.255-9.246 9.264-24.299 0.021-33.554-74.399-74.47-115.37-173.449-115.37-278.707 0-217.393 176.868-394.256 394.27-394.256 217.392 0 394.26 176.863 394.26 394.256 0 209.576-162.229 381.191-370.531 393.563l0-132.31c0-13.088-10.644-23.736-23.729-23.736-13.09 0-23.738 10.648-23.738 23.736L487.997 825l23.738 0c117.802 0 228.679-46.001 312.207-129.524 83.522-83.527 129.524-194.404 129.52-312.211C953.461 139.7 755.302-58.453 511.735-58.453L511.735-58.453zM511.73 324.69c-15.641 0-30.347 6.093-41.405 17.153-20.584 20.588-175.587 246.609-182.176 256.224l8.783 8.781c9.611-6.589 235.623-161.586 256.208-182.178 11.063-11.062 17.16-25.769 17.16-41.419 0-15.649-6.093-30.354-17.16-41.412-11.059-11.059-25.765-17.149-41.406-17.149L511.73 324.69 511.73 324.69zM511.73 324.69"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wenjianleixingpeizhi" unicode="&#59002;" d="M863.3 824h-593c-1.1 0-2-0.9-2-2v-104H160.8c-1.1 0-2-0.9-2-2v-770c0-1.1 0.9-2 2-2h593c1.1 0 2 0.9 2 2V50h107.5c1.1 0 2 0.9 2 2V822c0 1.1-0.9 2-2 2zM707.8-6c0-1.1-0.9-2-2-2h-497c-1.1 0-2 0.9-2 2V668c0 1.1 0.9 2 2 2h59.5v-618c0-1.1 0.9-2 2-2h437.5v-56z m109.5 106c0-1.1-0.9-2-2-2h-497c-1.1 0-2 0.9-2 2V774c0 1.1 0.9 2 2 2h497c1.1 0 2-0.9 2-2v-674zM702.6 453H510.9c-0.9 0-1.7 0.8-1.7 1.7v12.6c0 0.9-0.8 1.7-1.7 1.7h-28.6c-0.9 0-1.7-0.8-1.7-1.7v-12.6c0-0.9-0.8-1.7-1.7-1.7h-44.6c-0.9 0-1.7-0.8-1.7-1.7v-28.6c0-0.9 0.8-1.7 1.7-1.7h44.6c0.9 0 1.7-0.8 1.7-1.7v-12.6c0-0.9 0.8-1.7 1.7-1.7h28.6c0.9 0 1.7 0.8 1.7 1.7v12.6c0 0.9 0.8 1.7 1.7 1.7h191.6c0.9 0 1.7 0.8 1.7 1.7v28.6c0.1 0.9-0.7 1.7-1.6 1.7zM702.6 364.8H667c-0.9 0-1.7 0.8-1.7 1.7v12.6c0 0.9-0.8 1.7-1.7 1.7H635c-0.9 0-1.7-0.8-1.7-1.7v-12.6c0-0.9-0.8-1.7-1.7-1.7H430.9c-0.9 0-1.7-0.8-1.7-1.7v-28.6c0-0.9 0.8-1.7 1.7-1.7h200.6c0.9 0 1.7-0.8 1.7-1.7v-12.6c0-0.9 0.8-1.7 1.7-1.7h28.6c0.9 0 1.7 0.8 1.7 1.7v12.6c0 0.9 0.8 1.7 1.7 1.7h35.6c0.9 0 1.7 0.8 1.7 1.7v28.6c0.1 1-0.7 1.7-1.6 1.7zM702.6 541.1H667c-0.9 0-1.7 0.8-1.7 1.7v12.6c0 0.9-0.8 1.7-1.7 1.7H635c-0.9 0-1.7-0.8-1.7-1.7v-12.6c0-0.9-0.8-1.7-1.7-1.7H430.9c-0.9 0-1.7-0.8-1.7-1.7v-28.6c0-0.9 0.8-1.7 1.7-1.7h200.6c0.9 0 1.7-0.8 1.7-1.7v-12.6c0-0.9 0.8-1.7 1.7-1.7h28.6c0.9 0 1.7 0.8 1.7 1.7v12.6c0 0.9 0.8 1.7 1.7 1.7h35.6c0.9 0 1.7 0.8 1.7 1.7v28.6c0.1 0.9-0.7 1.7-1.6 1.7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shanchu1" unicode="&#59277;" d="M416 512c-19.2 0-32-12.8-32-32v-320c0-19.2 12.8-32 32-32s32 12.8 32 32v320c0 19.2-12.8 32-32 32zM928 704h-224v32c0 54.4-41.6 96-96 96h-192c-54.4 0-96-41.6-96-96v-32h-224c-19.2 0-32-12.8-32-32s12.8-32 32-32h64v-608c0-54.4 41.6-96 96-96h512c54.4 0 96 41.6 96 96v608h64c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-544 32c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32v-32h-256v32z m416-704c0-19.2-12.8-32-32-32h-512c-19.2 0-32 12.8-32 32v608h576v-608zM608 512c-19.2 0-32-12.8-32-32v-320c0-19.2 12.8-32 32-32s32 12.8 32 32v320c0 19.2-12.8 32-32 32z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianji" unicode="&#59297;" d="M965.818182-1.954909a34.909091 34.909091 0 1 0 0-69.818182h-884.363637a34.909091 34.909091 0 1 0 0 69.818182h884.363637z m-0.395637 633.134545L411.415273 77.149091l-215.970909-22.062546 22.085818 215.97091 481.722182 481.745454v0.023273l72.285091 72.261818c32.488727 32.488727 89.134545 32.488727 121.623272 0l72.261818-72.285091a85.457455 85.457455 0 0 0 25.204364-60.811636c0-22.970182-8.96-44.567273-25.204364-60.811637zM273.617455 133.259636l105.984 10.821819 439.482181 439.505454-95.138909 95.162182-439.505454-439.482182-10.821818-106.007273zM832.349091 780.450909a16.058182 16.058182 0 0 1-11.450182-4.747636l-47.592727-47.569455 95.162182-95.185454 47.569454 47.592727a16.197818 16.197818 0 0 1 0 22.900364l-72.238545 72.261818a16.104727 16.104727 0 0 1-11.450182 4.747636z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="daochu" unicode="&#59370;" d="M896 326.190545a34.909091 34.909091 0 0 0 34.909091-34.90909v-260.654546c0-68.002909-55.319273-123.345455-123.345455-123.345454H169.890909a123.485091 123.485091 0 0 0-123.345454 123.345454V668.276364a123.485091 123.485091 0 0 0 123.345454 123.345454h353.745455a34.909091 34.909091 0 1 0 0-69.818182H169.890909a53.597091 53.597091 0 0 1-53.527273-53.527272v-637.672728c0-29.509818 24.017455-53.527273 53.527273-53.527272h637.672727c29.509818 0 53.527273 24.017455 53.527273 53.527272v260.654546a34.909091 34.909091 0 0 0 34.909091 34.909091z m80.896 293.934546c7.400727-6.4 12.194909-15.755636 12.194909-26.298182 0-10.565818-4.770909-19.898182-12.194909-26.344727L781.032727 371.665455a34.792727 34.792727 0 0 0-24.692363-10.216728 34.909091 34.909091 0 0 0-24.669091 59.578182l134.749091 134.818909C563.2 535.738182 442.181818 404.177455 442.181818 105.099636a34.909091 34.909091 0 1 0-69.818182 0c0 341.317818 150.574545 500.573091 499.618909 521.239273L731.694545 766.580364a34.909091 34.909091 0 1 0 49.338182 49.384727l195.863273-195.84z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="chakan" unicode="&#58964;" d="M950.24-11.71L926 12.6 867.6 71q-35.33 35.35-70.6 70.7l-61.39 61.46c-3.24 3.23-6.45 6.49-9.67 9.76 43.8 51.61 74 115.19 84.33 182.15a405.37 405.37 0 0 1 5.09 60.84c-0.15 76.48-23.64 153.15-68.19 215.51A382.61 382.61 0 0 1 566.67 809c-72.52 26.5-154.32 28.86-228.52 7.87-71.89-20.34-138.1-62.86-185.64-120.61A380.53 380.53 0 0 1 66.19 482.6c-5.85-76.54 13.18-155.14 53-220.73C157.7 198.5 215.45 146 283.14 115.4a389.9 389.9 0 0 1 116.59-32.21c39.15-4.57 78.95-2.21 117.55 5.63 60.87 12.36 118.61 41.09 166 81.42l3.86-3.86L745.5 108q35.31-35.36 70.64-70.7 30.69-30.74 61.39-61.45c9.89-9.9 19.59-20 29.69-29.71l0.42-0.43c11.15-11.16 31.6-12 42.6 0s11.9 30.66 0 42.58zM637 209.94c-1.23-1-2.48-2-3.73-3l1.58 1.18c-0.68-0.5-1.34-1-2-1.52-1.14-0.9-3.26-2.46-2.51-1.88q-9.37-6.94-19.2-13.27a347.35 347.35 0 0 0-48.83-26 348.34 348.34 0 0 0-79.68-21.72 353.78 353.78 0 0 0-84.8 0A348.4 348.4 0 0 0 318 165.46a346.21 346.21 0 0 0-43.09 22.47q-10.68 6.55-20.85 13.89c-1.79 1.29-3.55 2.59-5.31 3.9l-0.77 0.58c-3.23 2.58-6.44 5.17-9.59 7.85a346.82 346.82 0 0 0-36.06 35.45q-4.12 4.68-8.07 9.53c-1 1.23-2 2.48-3 3.73 0.35-0.46 0.74-1 1.18-1.58-0.5 0.68-1 1.34-1.52 2-0.9 1.14-2.46 3.26-1.88 2.51q-6.95 9.37-13.27 19.2a346.32 346.32 0 0 0-26 48.83A347.83 347.83 0 0 0 128 413.51a353.78 353.78 0 0 0 0 84.8 347.38 347.38 0 0 0 21.78 79.83 347.5 347.5 0 0 0 22.46 43.09q6.57 10.68 13.9 20.86 1.93 2.67 3.9 5.3l0.58 0.77c2.58 3.23 5.17 6.44 7.84 9.59a347.82 347.82 0 0 0 35.45 36.06q4.69 4.12 9.54 8.08c1.23 1 2.48 2 3.73 3l-1.58-1.18 2 1.52c1.14 0.9 3.26 2.46 2.51 1.88q9.38 6.94 19.2 13.27a346.32 346.32 0 0 0 48.83 26 347.7 347.7 0 0 0 79.68 21.72 353.78 353.78 0 0 0 84.8 0 347.38 347.38 0 0 0 79.83-21.78 347.5 347.5 0 0 0 43.09-22.46q10.68-6.57 20.85-13.9 2.67-1.94 5.31-3.9l0.77-0.58c3.23-2.58 6.44-5.17 9.59-7.84a347.82 347.82 0 0 0 36.06-35.45q4.13-4.69 8.07-9.53 1.53-1.86 3-3.74c-0.35 0.46-0.74 1-1.18 1.58l1.52-2c0.9-1.14 2.46-3.26 1.88-2.51q6.94-9.38 13.27-19.2a346.32 346.32 0 0 0 26-48.83 347.27 347.27 0 0 0 21.72-79.69 346.86 346.86 0 0 0 0-84.78 347.46 347.46 0 0 0-21.78-79.84 347.5 347.5 0 0 0-22.46-43.09q-6.57-10.68-13.9-20.85-1.94-2.67-3.9-5.31l-0.58-0.77c-2.58-3.23-5.17-6.44-7.84-9.59q-8.62-10.16-18-19.61l-0.37-0.38q-8.26-8.31-17.06-16.07c-3.07-2.71-6.25-5.41-9.51-8.04zM440.25 455.91m-45.19 0a45.19 45.19 0 1 1 90.38 0 45.19 45.19 0 1 1-90.38 0ZM259.51 455.91m-45.19 0a45.19 45.19 0 1 1 90.38 0 45.19 45.19 0 1 1-90.38 0ZM620.99 455.91m-45.19 0a45.19 45.19 0 1 1 90.38 0 45.19 45.19 0 1 1-90.38 0Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="biaoqian" unicode="&#58935;" d="M947.2 473.6l-12.8 212.8c-3.2 64-56 116.8-120 120l-212.8 12.8c-36.8 1.6-72-11.2-97.6-36.8L113.6 393.6C64 342.4 64 262.4 113.6 212.8l225.6-225.6c49.6-49.6 131.2-49.6 180.8 0l388.8 388.8c27.2 25.6 41.6 60.8 38.4 97.6z m-81.6-52.8L475.2 30.4c-25.6-25.6-65.6-25.6-91.2 0L158.4 257.6c-25.6 25.6-25.6 65.6 0 91.2L548.8 737.6c12.8 12.8 30.4 19.2 49.6 19.2l214.4-12.8c32-1.6 57.6-27.2 60.8-60.8l12.8-212.8c-1.6-19.2-8-36.8-20.8-49.6zM550.4 603.2c-49.6-49.6-49.6-131.2 0-180.8s131.2-49.6 180.8 0 49.6 131.2 0 180.8-131.2 49.6-180.8 0z m134.4-136c-25.6-25.6-65.6-25.6-91.2 0-25.6 25.6-25.6 65.6 0 91.2 25.6 25.6 65.6 25.6 91.2 0 25.6-25.6 25.6-65.6 0-91.2z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/src/assets/plugins/iconfont/iconfont.ttf
+++ b/src/assets/plugins/iconfont/iconfont.ttf
--- a/src/assets/plugins/iconfont/iconfont.woff
+++ b/src/assets/plugins/iconfont/iconfont.woff
--- a/src/assets/plugins/iconfont/iconfont.woff2
+++ b/src/assets/plugins/iconfont/iconfont.woff2
--- a/src/index.html
+++ b/src/index.html
@ -7,6 +7,7 @@
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/style/options.css">
    <link rel="stylesheet" href="assets/plugins/select2/select2.min.css">
+    <link rel="stylesheet" href="assets/plugins/iconfont/iconfont.css">
    <script src="assets/plugins/jquery-3.3.1.min.js"></script>
    <script src="assets/plugins/sweetalert2/sweetalert2.all.min.js"></script>
    <script src="assets/plugins/beautify.min.js"></script>