|
|
@@ -0,0 +1,1154 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8"/>
|
|
|
+ <title>iconfont Demo</title>
|
|
|
+ <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
|
|
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
|
|
+ <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
|
|
+ <link rel="stylesheet" href="demo.css">
|
|
|
+ <link rel="stylesheet" href="iconfont.css">
|
|
|
+ <script src="iconfont.js"></script>
|
|
|
+ <!-- jQuery -->
|
|
|
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
|
|
+ <!-- 代码高亮 -->
|
|
|
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
|
|
+ <style>
|
|
|
+ .main .logo {
|
|
|
+ margin-top: 0;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main .logo a {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main .logo .sub-title {
|
|
|
+ margin-left: 0.5em;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(-45deg, #3967FF, #B500FE);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="main">
|
|
|
+ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
|
|
+ <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
|
|
+
|
|
|
+ </a></h1>
|
|
|
+ <div class="nav-tabs">
|
|
|
+ <ul id="tabs" class="dib-box">
|
|
|
+ <li class="dib active"><span>Unicode</span></li>
|
|
|
+ <li class="dib"><span>Font class</span></li>
|
|
|
+ <li class="dib"><span>Symbol</span></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3462405" target="_blank" class="nav-more">查看项目</a>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="tab-container">
|
|
|
+ <div class="content unicode" style="display: block;">
|
|
|
+ <ul class="icon_lists dib-box">
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">babel</div>
|
|
|
+ <div class="code-name">&#xe62d;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">上传</div>
|
|
|
+ <div class="code-name">&#xe691;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">编辑</div>
|
|
|
+ <div class="code-name">&#xe600;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">关闭</div>
|
|
|
+ <div class="code-name">&#xeb6a;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">新增</div>
|
|
|
+ <div class="code-name">&#xe6a4;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">add_file,新建,新增,文件夹</div>
|
|
|
+ <div class="code-name">&#xe663;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">24gf-folderOpen</div>
|
|
|
+ <div class="code-name">&#xeac5;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">bg-folder</div>
|
|
|
+ <div class="code-name">&#xe648;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">word</div>
|
|
|
+ <div class="code-name">&#xe601;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">powerpoint</div>
|
|
|
+ <div class="code-name">&#xe60a;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">word</div>
|
|
|
+ <div class="code-name">&#xe613;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">excel</div>
|
|
|
+ <div class="code-name">&#xe61c;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">audio</div>
|
|
|
+ <div class="code-name">&#xe623;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">angular-resolver</div>
|
|
|
+ <div class="code-name">&#xe625;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">ejs</div>
|
|
|
+ <div class="code-name">&#xe634;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">favicon</div>
|
|
|
+ <div class="code-name">&#xe636;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">eslint</div>
|
|
|
+ <div class="code-name">&#xe635;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">file</div>
|
|
|
+ <div class="code-name">&#xe637;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">contributing</div>
|
|
|
+ <div class="code-name">&#xe639;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">css</div>
|
|
|
+ <div class="code-name">&#xe63a;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">document</div>
|
|
|
+ <div class="code-name">&#xe63d;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">html</div>
|
|
|
+ <div class="code-name">&#xe656;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">git</div>
|
|
|
+ <div class="code-name">&#xe658;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">javascript-map</div>
|
|
|
+ <div class="code-name">&#xe65e;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">json</div>
|
|
|
+ <div class="code-name">&#xe65f;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">less</div>
|
|
|
+ <div class="code-name">&#xe662;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">mdx</div>
|
|
|
+ <div class="code-name">&#xe666;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">image</div>
|
|
|
+ <div class="code-name">&#xe669;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">javascript</div>
|
|
|
+ <div class="code-name">&#xe66b;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">nodejs</div>
|
|
|
+ <div class="code-name">&#xe683;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">npm</div>
|
|
|
+ <div class="code-name">&#xe685;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">nuxt</div>
|
|
|
+ <div class="code-name">&#xe686;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">pdf</div>
|
|
|
+ <div class="code-name">&#xe687;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">react</div>
|
|
|
+ <div class="code-name">&#xe689;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">react_ts</div>
|
|
|
+ <div class="code-name">&#xe68a;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">python</div>
|
|
|
+ <div class="code-name">&#xe690;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">sass</div>
|
|
|
+ <div class="code-name">&#xe69a;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">typescript</div>
|
|
|
+ <div class="code-name">&#xe6a3;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">xml</div>
|
|
|
+ <div class="code-name">&#xe6b2;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">video</div>
|
|
|
+ <div class="code-name">&#xe6b4;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">vue</div>
|
|
|
+ <div class="code-name">&#xe6b9;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">zip</div>
|
|
|
+ <div class="code-name">&#xe6be;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <div class="article markdown">
|
|
|
+ <h2 id="unicode-">Unicode 引用</h2>
|
|
|
+ <hr>
|
|
|
+
|
|
|
+ <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
|
|
+ <ul>
|
|
|
+ <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
|
|
+ <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
|
|
+ </ul>
|
|
|
+ <blockquote>
|
|
|
+ <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
|
|
+ </blockquote>
|
|
|
+ <p>Unicode 使用步骤如下：</p>
|
|
|
+ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
|
+<pre><code class="language-css"
|
|
|
+>@font-face {
|
|
|
+ font-family: 'iconfont';
|
|
|
+ src: url('iconfont.woff2?t=1656663119632') format('woff2'),
|
|
|
+ url('iconfont.woff?t=1656663119632') format('woff'),
|
|
|
+ url('iconfont.ttf?t=1656663119632') format('truetype');
|
|
|
+}
|
|
|
+</code></pre>
|
|
|
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
|
|
+<pre><code class="language-css"
|
|
|
+>.iconfont {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ font-size: 16px;
|
|
|
+ font-style: normal;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+}
|
|
|
+</code></pre>
|
|
|
+ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|
|
+<pre>
|
|
|
+<code class="language-html"
|
|
|
+><span class="iconfont">&#x33;</span>
|
|
|
+</code></pre>
|
|
|
+ <blockquote>
|
|
|
+ <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
|
+ </blockquote>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content font-class">
|
|
|
+ <ul class="icon_lists dib-box">
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-babel"></span>
|
|
|
+ <div class="name">
|
|
|
+ babel
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-babel
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-shangchuan1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 上传
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-shangchuan1
|
|
|
+ </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-guanbi"></span>
|
|
|
+ <div class="name">
|
|
|
+ 关闭
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-guanbi
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-xinzeng"></span>
|
|
|
+ <div class="name">
|
|
|
+ 新增
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-xinzeng
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-add_file"></span>
|
|
|
+ <div class="name">
|
|
|
+ add_file,新建,新增,文件夹
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-add_file
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-24gf-folderOpen"></span>
|
|
|
+ <div class="name">
|
|
|
+ 24gf-folderOpen
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-24gf-folderOpen
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-bg-folder"></span>
|
|
|
+ <div class="name">
|
|
|
+ bg-folder
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-bg-folder
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-word"></span>
|
|
|
+ <div class="name">
|
|
|
+ word
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-word
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-powerpoint"></span>
|
|
|
+ <div class="name">
|
|
|
+ powerpoint
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-powerpoint
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-word1"></span>
|
|
|
+ <div class="name">
|
|
|
+ word
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-word1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-excel"></span>
|
|
|
+ <div class="name">
|
|
|
+ excel
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-excel
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-audio"></span>
|
|
|
+ <div class="name">
|
|
|
+ audio
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-audio
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-angular-resolver"></span>
|
|
|
+ <div class="name">
|
|
|
+ angular-resolver
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-angular-resolver
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-ejs"></span>
|
|
|
+ <div class="name">
|
|
|
+ ejs
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-ejs
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-favicon"></span>
|
|
|
+ <div class="name">
|
|
|
+ favicon
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-favicon
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-eslint"></span>
|
|
|
+ <div class="name">
|
|
|
+ eslint
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-eslint
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-file"></span>
|
|
|
+ <div class="name">
|
|
|
+ file
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-file
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-contributing"></span>
|
|
|
+ <div class="name">
|
|
|
+ contributing
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-contributing
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-css"></span>
|
|
|
+ <div class="name">
|
|
|
+ css
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-css
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-document"></span>
|
|
|
+ <div class="name">
|
|
|
+ document
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-document
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-html"></span>
|
|
|
+ <div class="name">
|
|
|
+ html
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-html
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-git"></span>
|
|
|
+ <div class="name">
|
|
|
+ git
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-git
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-javascript-map"></span>
|
|
|
+ <div class="name">
|
|
|
+ javascript-map
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-javascript-map
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-json"></span>
|
|
|
+ <div class="name">
|
|
|
+ json
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-json
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-less"></span>
|
|
|
+ <div class="name">
|
|
|
+ less
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-less
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-mdx"></span>
|
|
|
+ <div class="name">
|
|
|
+ mdx
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-mdx
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-image"></span>
|
|
|
+ <div class="name">
|
|
|
+ image
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-image
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-javascript"></span>
|
|
|
+ <div class="name">
|
|
|
+ javascript
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-javascript
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-nodejs"></span>
|
|
|
+ <div class="name">
|
|
|
+ nodejs
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-nodejs
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-npm"></span>
|
|
|
+ <div class="name">
|
|
|
+ npm
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-npm
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-nuxt"></span>
|
|
|
+ <div class="name">
|
|
|
+ nuxt
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-nuxt
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-pdf"></span>
|
|
|
+ <div class="name">
|
|
|
+ pdf
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-pdf
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-react1"></span>
|
|
|
+ <div class="name">
|
|
|
+ react
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-react1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-react_ts"></span>
|
|
|
+ <div class="name">
|
|
|
+ react_ts
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-react_ts
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-python"></span>
|
|
|
+ <div class="name">
|
|
|
+ python
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-python
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-sass"></span>
|
|
|
+ <div class="name">
|
|
|
+ sass
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-sass
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-typescript"></span>
|
|
|
+ <div class="name">
|
|
|
+ typescript
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-typescript
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-xml"></span>
|
|
|
+ <div class="name">
|
|
|
+ xml
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-xml
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-video"></span>
|
|
|
+ <div class="name">
|
|
|
+ video
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-video
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-vue"></span>
|
|
|
+ <div class="name">
|
|
|
+ vue
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-vue
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-zip"></span>
|
|
|
+ <div class="name">
|
|
|
+ zip
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-zip
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <div class="article markdown">
|
|
|
+ <h2 id="font-class-">font-class 引用</h2>
|
|
|
+ <hr>
|
|
|
+
|
|
|
+ <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
|
|
+ <p>与 Unicode 使用方式相比，具有如下特点：</p>
|
|
|
+ <ul>
|
|
|
+ <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|
|
+ <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
|
|
+ </ul>
|
|
|
+ <p>使用步骤如下：</p>
|
|
|
+ <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
|
|
+<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|
|
+</code></pre>
|
|
|
+ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
|
+<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
|
+</code></pre>
|
|
|
+ <blockquote>
|
|
|
+ <p>"
|
|
|
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
|
+ </blockquote>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content symbol">
|
|
|
+ <ul class="icon_lists dib-box">
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-babel"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">babel</div>
|
|
|
+ <div class="code-name">#icon-babel</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-shangchuan1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">上传</div>
|
|
|
+ <div class="code-name">#icon-shangchuan1</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-guanbi"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">关闭</div>
|
|
|
+ <div class="code-name">#icon-guanbi</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xinzeng"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">新增</div>
|
|
|
+ <div class="code-name">#icon-xinzeng</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-add_file"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">add_file,新建,新增,文件夹</div>
|
|
|
+ <div class="code-name">#icon-add_file</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-24gf-folderOpen"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">24gf-folderOpen</div>
|
|
|
+ <div class="code-name">#icon-24gf-folderOpen</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-bg-folder"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">bg-folder</div>
|
|
|
+ <div class="code-name">#icon-bg-folder</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-word"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">word</div>
|
|
|
+ <div class="code-name">#icon-word</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-powerpoint"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">powerpoint</div>
|
|
|
+ <div class="code-name">#icon-powerpoint</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-word1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">word</div>
|
|
|
+ <div class="code-name">#icon-word1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-excel"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">excel</div>
|
|
|
+ <div class="code-name">#icon-excel</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-audio"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">audio</div>
|
|
|
+ <div class="code-name">#icon-audio</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-angular-resolver"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">angular-resolver</div>
|
|
|
+ <div class="code-name">#icon-angular-resolver</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-ejs"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">ejs</div>
|
|
|
+ <div class="code-name">#icon-ejs</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-favicon"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">favicon</div>
|
|
|
+ <div class="code-name">#icon-favicon</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-eslint"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">eslint</div>
|
|
|
+ <div class="code-name">#icon-eslint</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-file"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">file</div>
|
|
|
+ <div class="code-name">#icon-file</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-contributing"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">contributing</div>
|
|
|
+ <div class="code-name">#icon-contributing</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-css"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">css</div>
|
|
|
+ <div class="code-name">#icon-css</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-document"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">document</div>
|
|
|
+ <div class="code-name">#icon-document</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-html"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">html</div>
|
|
|
+ <div class="code-name">#icon-html</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-git"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">git</div>
|
|
|
+ <div class="code-name">#icon-git</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-javascript-map"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">javascript-map</div>
|
|
|
+ <div class="code-name">#icon-javascript-map</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-less"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">less</div>
|
|
|
+ <div class="code-name">#icon-less</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-mdx"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">mdx</div>
|
|
|
+ <div class="code-name">#icon-mdx</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-image"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">image</div>
|
|
|
+ <div class="code-name">#icon-image</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-javascript"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">javascript</div>
|
|
|
+ <div class="code-name">#icon-javascript</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-nodejs"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">nodejs</div>
|
|
|
+ <div class="code-name">#icon-nodejs</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-npm"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">npm</div>
|
|
|
+ <div class="code-name">#icon-npm</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-nuxt"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">nuxt</div>
|
|
|
+ <div class="code-name">#icon-nuxt</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-pdf"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">pdf</div>
|
|
|
+ <div class="code-name">#icon-pdf</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-react1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">react</div>
|
|
|
+ <div class="code-name">#icon-react1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-react_ts"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">react_ts</div>
|
|
|
+ <div class="code-name">#icon-react_ts</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-python"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">python</div>
|
|
|
+ <div class="code-name">#icon-python</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-sass"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">sass</div>
|
|
|
+ <div class="code-name">#icon-sass</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-typescript"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">typescript</div>
|
|
|
+ <div class="code-name">#icon-typescript</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xml"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">xml</div>
|
|
|
+ <div class="code-name">#icon-xml</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-video"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">video</div>
|
|
|
+ <div class="code-name">#icon-video</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-vue"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">vue</div>
|
|
|
+ <div class="code-name">#icon-vue</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-zip"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">zip</div>
|
|
|
+ <div class="code-name">#icon-zip</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <div class="article markdown">
|
|
|
+ <h2 id="symbol-">Symbol 引用</h2>
|
|
|
+ <hr>
|
|
|
+
|
|
|
+ <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|
|
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
|
|
+ <ul>
|
|
|
+ <li>支持多色图标了，不再受单色限制。</li>
|
|
|
+ <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|
|
+ <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
|
|
+ <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
|
|
+ </ul>
|
|
|
+ <p>使用步骤如下：</p>
|
|
|
+ <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
|
|
+<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|
|
+</code></pre>
|
|
|
+ <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|
|
+<pre><code class="language-html"><style>
|
|
|
+.icon {
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ vertical-align: -0.15em;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
|
|
+</code></pre>
|
|
|
+ <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
|
+<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xxx"></use>
|
|
|
+</svg>
|
|
|
+</code></pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ $(document).ready(function () {
|
|
|
+ $('.tab-container .content:first').show()
|
|
|
+
|
|
|
+ $('#tabs li').click(function (e) {
|
|
|
+ var tabContent = $('.tab-container .content')
|
|
|
+ var index = $(this).index()
|
|
|
+
|
|
|
+ if ($(this).hasClass('active')) {
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ $('#tabs li').removeClass('active')
|
|
|
+ $(this).addClass('active')
|
|
|
+
|
|
|
+ tabContent.hide().eq(index).fadeIn()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
lxh