引入阿里图标库图标

1e38e136 · fengzhaoyu · 36bf5af9 · 1e38e136 · 1e38e136 · 1e38e136
Commit 1e38e136 authored Nov 04, 2019 by fengzhaoyu
12 changed files
--- a/app.acss
+++ b/app.acss
 page {
+  
  flex: 1;
  display: flex;
  background: #f7f7f7;

--- a/fonts/demo.css
+++ b/fonts/demo.css
+/* 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/fonts/demo_index.html
+++ b/fonts/demo_index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.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=1487150" 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">&#xe60c;</span>
+                <div class="name">beifangren</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">time</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">zhouzhiren</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">dingwei</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">jia</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">laifangmudi</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">weixuan</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">yixuan</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">Open eyes</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe625;</span>
+                <div class="name">Close eyes</div>
+                <div class="code-name">&amp;#xe625;</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 iconbeifangren"></span>
+            <div class="name">
+              beifangren
+            </div>
+            <div class="code-name">.iconbeifangren
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icontime"></span>
+            <div class="name">
+              time
+            </div>
+            <div class="code-name">.icontime
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzhouzhiren"></span>
+            <div class="name">
+              zhouzhiren
+            </div>
+            <div class="code-name">.iconzhouzhiren
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondingwei"></span>
+            <div class="name">
+              dingwei
+            </div>
+            <div class="code-name">.icondingwei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjia"></span>
+            <div class="name">
+              jia
+            </div>
+            <div class="code-name">.iconjia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconlaifangmudi"></span>
+            <div class="name">
+              laifangmudi
+            </div>
+            <div class="code-name">.iconlaifangmudi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconweixuan"></span>
+            <div class="name">
+              weixuan
+            </div>
+            <div class="code-name">.iconweixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyixuan"></span>
+            <div class="name">
+              yixuan
+            </div>
+            <div class="code-name">.iconyixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconOpeneyes"></span>
+            <div class="name">
+              Open eyes
+            </div>
+            <div class="code-name">.iconOpeneyes
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconCloseeyes"></span>
+            <div class="name">
+              Close eyes
+            </div>
+            <div class="code-name">.iconCloseeyes
+            </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 iconxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbeifangren"></use>
+                </svg>
+                <div class="name">beifangren</div>
+                <div class="code-name">#iconbeifangren</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontime"></use>
+                </svg>
+                <div class="name">time</div>
+                <div class="code-name">#icontime</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzhouzhiren"></use>
+                </svg>
+                <div class="name">zhouzhiren</div>
+                <div class="code-name">#iconzhouzhiren</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondingwei"></use>
+                </svg>
+                <div class="name">dingwei</div>
+                <div class="code-name">#icondingwei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjia"></use>
+                </svg>
+                <div class="name">jia</div>
+                <div class="code-name">#iconjia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconlaifangmudi"></use>
+                </svg>
+                <div class="name">laifangmudi</div>
+                <div class="code-name">#iconlaifangmudi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconweixuan"></use>
+                </svg>
+                <div class="name">weixuan</div>
+                <div class="code-name">#iconweixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyixuan"></use>
+                </svg>
+                <div class="name">yixuan</div>
+                <div class="code-name">#iconyixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconOpeneyes"></use>
+                </svg>
+                <div class="name">Open eyes</div>
+                <div class="code-name">#iconOpeneyes</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconCloseeyes"></use>
+                </svg>
+                <div class="name">Close eyes</div>
+                <div class="code-name">#iconCloseeyes</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/fonts/iconfont.acss
+++ b/fonts/iconfont.acss
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1572838523623'); /* IE9 */
+  src: url('iconfont.eot?t=1572838523623#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=1572838523623') format('woff'),
+  url('iconfont.ttf?t=1572838523623') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1572838523623#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;
+}
+
+.iconbeifangren:before {
+  content: "\e60c";
+}
+
+.icontime:before {
+  content: "\e60d";
+}
+
+.iconzhouzhiren:before {
+  content: "\e60e";
+}
+
+.icondingwei:before {
+  content: "\e610";
+}
+
+.iconjia:before {
+  content: "\e614";
+}
+
+.iconlaifangmudi:before {
+  content: "\e616";
+}
+
+.iconweixuan:before {
+  content: "\e61a";
+}
+
+.iconyixuan:before {
+  content: "\e61b";
+}
+
+.iconOpeneyes:before {
+  content: "\e624";
+}
+
+.iconCloseeyes:before {
+  content: "\e625";
+}
+
--- a/fonts/iconfont.eot
+++ b/fonts/iconfont.eot
--- a/fonts/iconfont.js
+++ b/fonts/iconfont.js
+!function(s){var e,t='<svg><symbol id="iconbeifangren" viewBox="0 0 1024 1024"><path d="M859.136 826.368c-3.584-13.824-8.704-25.088-14.848-32.768-10.752-8.192-36.352-17.408-85.504-30.72-2.048-0.512-17.408-5.12-22.016-6.144-53.76-14.848-84.48-25.6-113.152-41.472-46.08-25.6-74.752-61.44-74.752-109.568-0.512-25.088 9.216-44.032 27.136-65.536 4.608-5.632 26.112-30.208 31.744-36.864 21.504-26.624 32.768-51.2 33.792-83.456v-5.12-13.312V363.52v-27.648-20.48-7.68c-0.512-58.88-19.968-91.648-54.784-111.104-13.312-7.68-28.672-12.8-45.056-15.872-11.776-2.048-22.016-3.072-29.696-3.072s-17.92 1.024-29.184 3.072c-16.896 3.584-32.256 9.216-46.08 16.384-34.304 19.456-54.272 52.736-54.784 110.08 0.512 17.408 0.512 81.408-0.512 110.592 1.536 33.28 12.288 57.856 34.304 84.992 5.632 7.168 27.648 31.744 32.256 37.376 17.408 22.016 27.136 40.96 26.624 64.512 0.512 49.152-28.16 85.504-74.752 111.104-28.672 15.872-59.392 26.112-113.152 41.472-4.608 1.024-19.968 5.632-22.016 6.144-49.664 13.824-74.752 23.04-85.504 30.72-6.144 7.68-11.264 18.944-14.848 32.768-1.536 6.656-3.072 13.312-4.096 19.968h702.976c-1.024-7.168-2.56-13.824-4.096-20.48zM326.144 308.224C327.68 130.56 485.888 122.88 511.488 122.88c27.136 0 184.32 7.68 185.344 185.344 0 0-0.512 108.544 0 111.616-2.56 111.104-93.184 148.48-92.672 185.344-0.512 92.672 217.6 95.232 278.528 148.48 47.616 51.712 36.864 148.48 36.864 148.48H103.424s-10.752-96.768 36.864-148.48c60.928-53.248 279.04-55.296 278.528-148.48C419.84 568.32 329.728 530.432 326.144 419.84c0.512-3.072 0.512-101.888 0-111.616z" fill="#040000" ></path></symbol><symbol id="icontime" viewBox="0 0 1024 1024"><path d="M542.208 526.336c0.512 8.192-2.048 16.384-8.192 22.528L414.72 667.648c-10.752 10.752-28.672 10.752-39.936 0-10.752-10.752-10.752-28.672 0-39.936L486.4 516.608V390.144c0-15.36 12.8-28.16 28.16-28.16s28.16 12.8 28.16 28.16v131.584c0 1.536 0 3.072-0.512 4.608z m-28.672 379.904c-217.6 0-394.24-176.64-394.24-394.24s176.64-394.24 394.24-394.24 394.24 176.64 394.24 394.24-177.152 394.24-394.24 394.24z m0-732.16c-186.368 0-337.92 151.552-337.92 337.92s151.552 337.92 337.92 337.92 337.92-151.552 337.92-337.92-152.064-337.92-337.92-337.92z" fill="#040000" ></path></symbol><symbol id="iconzhouzhiren" viewBox="0 0 1024 1024"><path d="M723.968 802.816c-6.656-20.48-15.36-36.352-26.112-45.568-11.264-10.24-31.232-19.456-71.68-33.792-2.56-1.024-5.632-2.048-11.776-4.096-41.984-14.848-62.464-23.552-83.968-37.376-35.328-23.04-56.832-55.296-56.832-97.28 0-22.528 8.192-40.96 22.016-60.928 4.096-5.632 8.192-11.264 14.336-18.432 1.536-2.048 6.656-7.68 6.656-8.192 2.56-3.072 4.608-5.632 6.656-7.68 17.92-22.528 25.088-37.376 25.088-53.76V380.928v-32.256-17.92-7.168c0-101.376-41.984-131.072-120.832-131.072-80.384 0.512-121.856 29.184-122.368 130.048V435.2c0 16.384 7.168 31.744 25.088 54.272 2.048 2.56 3.584 4.608 6.144 7.68 0.512 0.512 5.12 6.656 6.656 8.192 6.144 7.68 10.24 12.8 14.336 18.432 13.824 19.456 22.016 37.888 22.016 60.416 0 42.496-23.04 75.264-59.904 99.328-22.528 14.336-45.056 24.576-87.552 39.424-2.56 1.024-11.776 4.096-13.824 4.608-37.888 13.312-55.296 21.504-62.464 28.16l-2.048 2.048-2.048 1.536c-7.168 5.12-15.872 22.528-22.528 47.616-1.536 6.144-3.072 12.8-4.608 19.456h605.184c-1.024-7.68-3.072-15.872-5.632-23.552zM249.344 322.56c0-167.936 113.664-186.88 178.176-186.88S604.16 154.624 604.672 322.56v112.128c0 74.752-74.752 112.64-74.752 149.504 0 74.752 145.408 77.312 205.312 130.56 59.904 53.248 55.808 167.936 55.808 167.936H62.464s3.072-128.512 55.808-167.936c49.664-46.08 205.824-55.808 205.312-130.56 0-36.864-74.752-74.752-74.752-149.504 0.512-17.92 0.512-102.912 0.512-112.128z m567.808 467.456c-6.656-19.968-15.36-38.912-26.624-55.808h103.936c0-40.448-163.328-77.312-198.656-99.84-35.84-23.04-53.76-44.032-54.272-86.016v-3.072c1.024-22.528 9.728-38.4 25.088-56.832 3.584-4.096 20.992-23.04 25.088-28.16 16.896-20.48 24.576-37.888 24.064-62.464v-46.592-47.616c0.512-42.496-12.8-65.024-36.864-78.848-9.728-5.632-21.504-9.216-33.792-11.776-8.704-1.536-16.896-2.048-22.528-2.048-4.608 0-10.752 0.512-17.92 1.536-7.68-18.432-16.896-35.328-28.672-51.2 21.504-5.632 39.424-6.144 46.592-6.144 22.016 0 151.552 6.144 149.504 149.504v93.184c0.512 89.6-73.728 120.32-74.752 149.504-1.024 60.416 146.944 67.072 221.184 122.368 41.984 33.792 39.936 120.32 39.936 120.32h-141.312z" fill="#070001" ></path></symbol><symbol id="icondingwei" viewBox="0 0 1024 1024"><path d="M512.512 877.568c189.44-190.464 284.16-338.432 284.16-443.904 0-158.72-127.488-287.232-284.16-287.232S228.352 274.944 228.352 433.664c0 105.984 94.72 253.952 284.16 443.904z m38.4 38.4c-20.992 20.992-55.808 20.992-76.8 0C274.944 716.288 174.08 558.08 174.08 433.664 174.08 245.248 325.632 92.16 512.512 92.16c186.88 0 338.432 153.088 338.432 341.504 0.512 124.416-100.864 282.624-300.032 482.304z m-38.4-376.832c59.904 0 108.544-48.64 108.544-108.544s-48.64-108.544-108.544-108.544S404.48 370.688 404.48 430.592s48.128 108.544 108.032 108.544z m0 54.272c-89.6 0-162.304-72.704-162.304-162.304s72.704-162.304 162.304-162.304 162.304 72.704 162.304 162.304c0.512 89.6-72.192 162.304-162.304 162.304z" fill="#040000" ></path></symbol><symbol id="iconjia" viewBox="0 0 1024 1024"><path d="M540.16 468.992H732.16c3.072 0 5.12 2.048 5.12 5.12v46.08c0 3.072-2.048 5.12-5.12 5.12h-192v192c0 3.072-2.048 5.12-5.12 5.12h-46.08c-3.072 0-5.12-2.048-5.12-5.12v-192H291.84c-3.072 0-5.12-2.048-5.12-5.12v-46.08c0-3.072 2.048-5.12 5.12-5.12h192V276.992c0-3.072 2.048-5.12 5.12-5.12h46.08c3.072 0 5.12 2.048 5.12 5.12v192zM174.08 497.152c0 186.368 151.04 337.92 337.92 337.92s337.92-151.552 337.92-337.92-151.552-337.92-337.92-337.92-337.92 151.552-337.92 337.92z m-56.32 0c0-217.6 176.64-394.24 394.24-394.24s394.24 176.64 394.24 394.24-176.64 394.24-394.24 394.24-394.24-176.128-394.24-394.24z" fill="#040000" ></path></symbol><symbol id="iconlaifangmudi" viewBox="0 0 1024 1024"><path d="M270.848 472.064h439.808L570.88 312.32l139.776-159.744H270.848v319.488z m0 59.904V931.84H210.944V112.128c0-11.264 9.216-19.968 19.968-19.968h559.616c10.752 0 19.968 8.704 19.968 19.968 0 4.608-1.536 9.216 0 19.968L650.752 312.32l159.744 179.712c2.56 15.872 1.024 28.672 0 39.936-10.752-1.536-15.36 0-19.968 0H270.848z" fill="#040000" ></path></symbol><symbol id="iconweixuan" viewBox="0 0 1024 1024"><path d="M174.08 486.4c0 186.368 151.04 337.92 337.92 337.92s337.92-151.552 337.92-337.92-151.552-337.92-337.92-337.92-337.92 151.552-337.92 337.92z m-56.32 0c0-217.6 176.64-394.24 394.24-394.24s394.24 176.64 394.24 394.24-176.64 394.24-394.24 394.24-394.24-176.64-394.24-394.24z" fill="#040000" ></path></symbol><symbol id="iconyixuan" viewBox="0 0 1024 1024"><path d="M473.6 573.952c-1.024 1.024-2.048 1.024-3.072 0L372.736 503.808c-10.752-10.752-28.672-10.752-39.936 0-10.752 10.752-10.752 28.672 0 39.936l119.296 119.296c5.632 5.632 12.8 8.192 19.968 8.192s14.336-2.56 19.968-8.192l239.104-239.104c10.752-10.752 10.752-28.672 0-39.936-10.752-10.752-28.672-10.752-39.936 0l-217.6 189.952zM117.76 512c0-217.6 176.64-394.24 394.24-394.24s394.24 176.64 394.24 394.24-176.64 394.24-394.24 394.24-394.24-176.64-394.24-394.24z" fill="#040000" ></path></symbol><symbol id="iconOpeneyes" viewBox="0 0 1024 1024"><path d="M511.488 654.848c-61.952 0-112.128-50.176-112.128-112.128s50.176-112.128 112.128-112.128 112.128 50.176 112.128 112.128-50.176 112.128-112.128 112.128z m0 55.808c-92.672 0-167.936-75.264-167.936-167.936 0-92.672 75.264-167.936 167.936-167.936 92.672 0 167.936 75.264 167.936 167.936 0 92.672-75.264 167.936-167.936 167.936z m0-419.84c-208.896 0-448 251.904-448 251.904s239.104 251.904 448 251.904 448-251.904 448-251.904-239.616-251.904-448-251.904z" fill="#000000" ></path></symbol><symbol id="iconCloseeyes" viewBox="0 0 1024 1024"><path d="M919.552 367.616c8.704-13.312 6.144-30.72-6.144-41.472-13.312-10.24-30.72-7.168-41.472 6.144-1.536 1.536-164.864 194.56-359.424 194.56-188.416 0-359.424-194.56-360.96-196.096-10.24-11.776-29.696-13.312-41.472-3.072s-13.312 29.696-3.072 41.472c3.072 4.608 38.4 44.032 94.208 88.576l-75.264 77.824c-11.776 11.776-10.24 30.72 1.536 41.472 3.072 6.144 10.24 8.704 17.92 8.704 7.168 0 14.848-3.072 20.48-8.704l80.896-83.968c38.4 26.624 83.968 51.712 134.144 69.12l-30.72 104.448c-4.608 16.384 4.608 32.256 20.48 36.864h8.704c13.312 0 25.088-8.704 28.16-22.016l30.72-104.448c23.552 4.608 48.64 7.168 73.728 7.168s50.176-3.072 73.728-7.168l30.72 102.912c3.072 13.312 16.384 22.016 28.16 22.016 3.072 0 6.144 0 7.168-1.536 16.384-4.608 25.088-20.48 20.48-36.864l-30.72-102.912c50.176-17.92 95.744-42.496 134.144-69.12l79.36 82.432c6.144 6.144 13.312 8.704 20.48 8.704s14.848-3.072 20.48-8.704c11.776-11.776 11.776-29.696 1.536-41.472l-75.264-77.824c61.952-44.032 97.28-87.04 97.28-87.04z" fill="#000000" ></path></symbol></svg>',c=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(c&&!s.__iconfont__svg__cssinject__){s.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var c=function(){document.removeEventListener("DOMContentLoaded",c,!1),e()};document.addEventListener("DOMContentLoaded",c,!1)}else document.attachEvent&&(i=e,o=s.document,n=!1,(l=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(l,50)}t()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())});function t(){n||(n=!0,i())}var i,o,n,l}(function(){var e,c;(e=document.createElement("div")).innerHTML=t,t=null,(c=e.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",function(e,c){c.firstChild?function(e,c){c.parentNode.insertBefore(e,c)}(e,c.firstChild):c.appendChild(e)}(c,document.body))})}(window);
\ No newline at end of file
--- a/fonts/iconfont.json
+++ b/fonts/iconfont.json
+{
+  "id": "1487150",
+  "name": "e卡通-小程序",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "开发用",
+  "glyphs": [
+    {
+      "icon_id": "11569429",
+      "name": "beifangren",
+      "font_class": "beifangren",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "11569510",
+      "name": "time",
+      "font_class": "time",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "11569691",
+      "name": "zhouzhiren",
+      "font_class": "zhouzhiren",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "11570190",
+      "name": "dingwei",
+      "font_class": "dingwei",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "11577095",
+      "name": "jia",
+      "font_class": "jia",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "11577815",
+      "name": "laifangmudi",
+      "font_class": "laifangmudi",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "11578995",
+      "name": "weixuan",
+      "font_class": "weixuan",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "11579301",
+      "name": "yixuan",
+      "font_class": "yixuan",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "11586288",
+      "name": "Open eyes",
+      "font_class": "Openeyes",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "11586423",
+      "name": "Close eyes",
+      "font_class": "Closeeyes",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    }
+  ]
+}
--- a/fonts/iconfont.svg
+++ b/fonts/iconfont.svg
+<?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="beifangren" unicode="&#58892;" d="M859.136 69.632c-3.584 13.824-8.704 25.088-14.848 32.768-10.752 8.192-36.352 17.408-85.504 30.72-2.048 0.512-17.408 5.12-22.016 6.144-53.76 14.848-84.48 25.6-113.152 41.472-46.08 25.6-74.752 61.44-74.752 109.568-0.512 25.088 9.216 44.032 27.136 65.536 4.608 5.632 26.112 30.208 31.744 36.864 21.504 26.624 32.768 51.2 33.792 83.456v5.12 13.312V532.48v27.648 20.48 7.68c-0.512 58.88-19.968 91.648-54.784 111.104-13.312 7.68-28.672 12.8-45.056 15.872-11.776 2.048-22.016 3.072-29.696 3.072s-17.92-1.024-29.184-3.072c-16.896-3.584-32.256-9.216-46.08-16.384-34.304-19.456-54.272-52.736-54.784-110.08 0.512-17.408 0.512-81.408-0.512-110.592 1.536-33.28 12.288-57.856 34.304-84.992 5.632-7.168 27.648-31.744 32.256-37.376 17.408-22.016 27.136-40.96 26.624-64.512 0.512-49.152-28.16-85.504-74.752-111.104-28.672-15.872-59.392-26.112-113.152-41.472-4.608-1.024-19.968-5.632-22.016-6.144-49.664-13.824-74.752-23.04-85.504-30.72-6.144-7.68-11.264-18.944-14.848-32.768-1.536-6.656-3.072-13.312-4.096-19.968h702.976c-1.024 7.168-2.56 13.824-4.096 20.48zM326.144 587.776C327.68 765.44 485.888 773.12 511.488 773.12c27.136 0 184.32-7.68 185.344-185.344 0 0-0.512-108.544 0-111.616-2.56-111.104-93.184-148.48-92.672-185.344-0.512-92.672 217.6-95.232 278.528-148.48 47.616-51.712 36.864-148.48 36.864-148.48H103.424s-10.752 96.768 36.864 148.48c60.928 53.248 279.04 55.296 278.528 148.48C419.84 327.68 329.728 365.568 326.144 476.16c0.512 3.072 0.512 101.888 0 111.616z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="time" unicode="&#58893;" d="M542.208 369.664c0.512-8.192-2.048-16.384-8.192-22.528L414.72 228.352c-10.752-10.752-28.672-10.752-39.936 0-10.752 10.752-10.752 28.672 0 39.936L486.4 379.392V505.856c0 15.36 12.8 28.16 28.16 28.16s28.16-12.8 28.16-28.16v-131.584c0-1.536 0-3.072-0.512-4.608z m-28.672-379.904c-217.6 0-394.24 176.64-394.24 394.24s176.64 394.24 394.24 394.24 394.24-176.64 394.24-394.24-177.152-394.24-394.24-394.24z m0 732.16c-186.368 0-337.92-151.552-337.92-337.92s151.552-337.92 337.92-337.92 337.92 151.552 337.92 337.92-152.064 337.92-337.92 337.92z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhouzhiren" unicode="&#58894;" d="M723.968 93.184c-6.656 20.48-15.36 36.352-26.112 45.568-11.264 10.24-31.232 19.456-71.68 33.792-2.56 1.024-5.632 2.048-11.776 4.096-41.984 14.848-62.464 23.552-83.968 37.376-35.328 23.04-56.832 55.296-56.832 97.28 0 22.528 8.192 40.96 22.016 60.928 4.096 5.632 8.192 11.264 14.336 18.432 1.536 2.048 6.656 7.68 6.656 8.192 2.56 3.072 4.608 5.632 6.656 7.68 17.92 22.528 25.088 37.376 25.088 53.76V515.072v32.256 17.92 7.168c0 101.376-41.984 131.072-120.832 131.072-80.384-0.512-121.856-29.184-122.368-130.048V460.8c0-16.384 7.168-31.744 25.088-54.272 2.048-2.56 3.584-4.608 6.144-7.68 0.512-0.512 5.12-6.656 6.656-8.192 6.144-7.68 10.24-12.8 14.336-18.432 13.824-19.456 22.016-37.888 22.016-60.416 0-42.496-23.04-75.264-59.904-99.328-22.528-14.336-45.056-24.576-87.552-39.424-2.56-1.024-11.776-4.096-13.824-4.608-37.888-13.312-55.296-21.504-62.464-28.16l-2.048-2.048-2.048-1.536c-7.168-5.12-15.872-22.528-22.528-47.616-1.536-6.144-3.072-12.8-4.608-19.456h605.184c-1.024 7.68-3.072 15.872-5.632 23.552zM249.344 573.44c0 167.936 113.664 186.88 178.176 186.88S604.16 741.376 604.672 573.44v-112.128c0-74.752-74.752-112.64-74.752-149.504 0-74.752 145.408-77.312 205.312-130.56 59.904-53.248 55.808-167.936 55.808-167.936H62.464s3.072 128.512 55.808 167.936c49.664 46.08 205.824 55.808 205.312 130.56 0 36.864-74.752 74.752-74.752 149.504 0.512 17.92 0.512 102.912 0.512 112.128z m567.808-467.456c-6.656 19.968-15.36 38.912-26.624 55.808h103.936c0 40.448-163.328 77.312-198.656 99.84-35.84 23.04-53.76 44.032-54.272 86.016v3.072c1.024 22.528 9.728 38.4 25.088 56.832 3.584 4.096 20.992 23.04 25.088 28.16 16.896 20.48 24.576 37.888 24.064 62.464v46.592 47.616c0.512 42.496-12.8 65.024-36.864 78.848-9.728 5.632-21.504 9.216-33.792 11.776-8.704 1.536-16.896 2.048-22.528 2.048-4.608 0-10.752-0.512-17.92-1.536-7.68 18.432-16.896 35.328-28.672 51.2 21.504 5.632 39.424 6.144 46.592 6.144 22.016 0 151.552-6.144 149.504-149.504v-93.184c0.512-89.6-73.728-120.32-74.752-149.504-1.024-60.416 146.944-67.072 221.184-122.368 41.984-33.792 39.936-120.32 39.936-120.32h-141.312z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dingwei" unicode="&#58896;" d="M512.512 18.432c189.44 190.464 284.16 338.432 284.16 443.904 0 158.72-127.488 287.232-284.16 287.232S228.352 621.056 228.352 462.336c0-105.984 94.72-253.952 284.16-443.904z m38.4-38.4c-20.992-20.992-55.808-20.992-76.8 0C274.944 179.712 174.08 337.92 174.08 462.336 174.08 650.752 325.632 803.84 512.512 803.84c186.88 0 338.432-153.088 338.432-341.504 0.512-124.416-100.864-282.624-300.032-482.304z m-38.4 376.832c59.904 0 108.544 48.64 108.544 108.544s-48.64 108.544-108.544 108.544S404.48 525.312 404.48 465.408s48.128-108.544 108.032-108.544z m0-54.272c-89.6 0-162.304 72.704-162.304 162.304s72.704 162.304 162.304 162.304 162.304-72.704 162.304-162.304c0.512-89.6-72.192-162.304-162.304-162.304z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jia" unicode="&#58900;" d="M540.16 427.008H732.16c3.072 0 5.12-2.048 5.12-5.12v-46.08c0-3.072-2.048-5.12-5.12-5.12h-192v-192c0-3.072-2.048-5.12-5.12-5.12h-46.08c-3.072 0-5.12 2.048-5.12 5.12v192H291.84c-3.072 0-5.12 2.048-5.12 5.12v46.08c0 3.072 2.048 5.12 5.12 5.12h192V619.008c0 3.072 2.048 5.12 5.12 5.12h46.08c3.072 0 5.12-2.048 5.12-5.12v-192zM174.08 398.848c0-186.368 151.04-337.92 337.92-337.92s337.92 151.552 337.92 337.92-151.552 337.92-337.92 337.92-337.92-151.552-337.92-337.92z m-56.32 0c0 217.6 176.64 394.24 394.24 394.24s394.24-176.64 394.24-394.24-176.64-394.24-394.24-394.24-394.24 176.128-394.24 394.24z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="laifangmudi" unicode="&#58902;" d="M270.848 423.936h439.808L570.88 583.68l139.776 159.744H270.848v-319.488z m0-59.904V-35.84H210.944V783.872c0 11.264 9.216 19.968 19.968 19.968h559.616c10.752 0 19.968-8.704 19.968-19.968 0-4.608-1.536-9.216 0-19.968L650.752 583.68l159.744-179.712c2.56-15.872 1.024-28.672 0-39.936-10.752 1.536-15.36 0-19.968 0H270.848z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="weixuan" unicode="&#58906;" d="M174.08 409.6c0-186.368 151.04-337.92 337.92-337.92s337.92 151.552 337.92 337.92-151.552 337.92-337.92 337.92-337.92-151.552-337.92-337.92z m-56.32 0c0 217.6 176.64 394.24 394.24 394.24s394.24-176.64 394.24-394.24-176.64-394.24-394.24-394.24-394.24 176.64-394.24 394.24z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yixuan" unicode="&#58907;" d="M473.6 322.048c-1.024-1.024-2.048-1.024-3.072 0L372.736 392.192c-10.752 10.752-28.672 10.752-39.936 0-10.752-10.752-10.752-28.672 0-39.936l119.296-119.296c5.632-5.632 12.8-8.192 19.968-8.192s14.336 2.56 19.968 8.192l239.104 239.104c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-217.6-189.952zM117.76 384c0 217.6 176.64 394.24 394.24 394.24s394.24-176.64 394.24-394.24-176.64-394.24-394.24-394.24-394.24 176.64-394.24 394.24z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="Openeyes" unicode="&#58916;" d="M511.488 241.15200000000004c-61.952 0-112.128 50.176-112.128 112.128s50.176 112.128 112.128 112.128 112.128-50.176 112.128-112.128-50.176-112.128-112.128-112.128z m0-55.808c-92.672 0-167.936 75.264-167.936 167.936 0 92.672 75.264 167.936 167.936 167.936 92.672 0 167.936-75.264 167.936-167.936 0-92.672-75.264-167.936-167.936-167.936z m0 419.84c-208.896 0-448-251.904-448-251.904s239.104-251.904 448-251.904 448 251.904 448 251.904-239.616 251.904-448 251.904z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="Closeeyes" unicode="&#58917;" d="M919.552 528.384c8.704 13.312 6.144 30.72-6.144 41.472-13.312 10.24-30.72 7.168-41.472-6.144-1.536-1.536-164.864-194.56-359.424-194.56-188.416 0-359.424 194.56-360.96 196.096-10.24 11.776-29.696 13.312-41.472 3.072s-13.312-29.696-3.072-41.472c3.072-4.608 38.4-44.032 94.208-88.576l-75.264-77.824c-11.776-11.776-10.24-30.72 1.536-41.472 3.072-6.144 10.24-8.704 17.92-8.704 7.168 0 14.848 3.072 20.48 8.704l80.896 83.968c38.4-26.624 83.968-51.712 134.144-69.12l-30.72-104.448c-4.608-16.384 4.608-32.256 20.48-36.864h8.704c13.312 0 25.088 8.704 28.16 22.016l30.72 104.448c23.552-4.608 48.64-7.168 73.728-7.168s50.176 3.072 73.728 7.168l30.72-102.912c3.072-13.312 16.384-22.016 28.16-22.016 3.072 0 6.144 0 7.168 1.536 16.384 4.608 25.088 20.48 20.48 36.864l-30.72 102.912c50.176 17.92 95.744 42.496 134.144 69.12l79.36-82.432c6.144-6.144 13.312-8.704 20.48-8.704s14.848 3.072 20.48 8.704c11.776 11.776 11.776 29.696 1.536 41.472l-75.264 77.824c61.952 44.032 97.28 87.04 97.28 87.04z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/fonts/iconfont.ttf
+++ b/fonts/iconfont.ttf
--- a/fonts/iconfont.woff
+++ b/fonts/iconfont.woff
--- a/fonts/iconfont.woff2
+++ b/fonts/iconfont.woff2
--- a/pages/index/index.acss
+++ b/pages/index/index.acss
+@import '../../fonts/iconfont.acss';
 .header{
  width: 750rpx;
  height: 300rpx;