|
|
@@ -2,8 +2,9 @@
|
|
|
<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"/>
|
|
|
+ <title>iconfont Demo</title>
|
|
|
+ <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
|
|
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
|
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
<link rel="stylesheet" href="iconfont.css">
|
|
|
@@ -12,10 +13,33 @@
|
|
|
<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"></a></h1>
|
|
|
+ <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>
|
|
|
@@ -31,6 +55,288 @@
|
|
|
<ul class="icon_lists dib-box">
|
|
|
|
|
|
<li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">插件</div>
|
|
|
+ <div class="code-name">&#xe809;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">帮助</div>
|
|
|
+ <div class="code-name">&#xe8a3;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">gitbook</div>
|
|
|
+ <div class="code-name">&#xe80a;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">图片</div>
|
|
|
+ <div class="code-name">&#xe7f5;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">编辑</div>
|
|
|
+ <div class="code-name">&#xe7f6;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">文本编辑</div>
|
|
|
+ <div class="code-name">&#xe7f7;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">217时间-线性</div>
|
|
|
+ <div class="code-name">&#xe8c4;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">图片剪切</div>
|
|
|
+ <div class="code-name">&#xe7f8;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">金钱</div>
|
|
|
+ <div class="code-name">&#xe7f9;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">城市级联管理</div>
|
|
|
+ <div class="code-name">&#xe7fa;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">附件</div>
|
|
|
+ <div class="code-name">&#xe7fb;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">80-多选</div>
|
|
|
+ <div class="code-name">&#xe7fc;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">多行文本</div>
|
|
|
+ <div class="code-name">&#xe7fd;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">颜色</div>
|
|
|
+ <div class="code-name">&#xe7fe;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">定位</div>
|
|
|
+ <div class="code-name">&#xe7ff;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">开关</div>
|
|
|
+ <div class="code-name">&#xe800;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">icon_滑块</div>
|
|
|
+ <div class="code-name">&#xe801;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">icon_评分</div>
|
|
|
+ <div class="code-name">&#xe802;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">富文本编辑</div>
|
|
|
+ <div class="code-name">&#xe803;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">编辑器</div>
|
|
|
+ <div class="code-name">&#xe804;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">栅格布局</div>
|
|
|
+ <div class="code-name">&#xe805;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">计数器</div>
|
|
|
+ <div class="code-name">&#xe806;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">级联</div>
|
|
|
+ <div class="code-name">&#xe807;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">下拉选择</div>
|
|
|
+ <div class="code-name">&#xe808;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">两端对齐</div>
|
|
|
+ <div class="code-name">&#xe7f4;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">方块</div>
|
|
|
+ <div class="code-name">&#xe7f3;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">撤销</div>
|
|
|
+ <div class="code-name">&#xe7f1;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">重做</div>
|
|
|
+ <div class="code-name">&#xe7f2;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">下载ms 代码</div>
|
|
|
+ <div class="code-name">&#xe7f0;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">局部代码</div>
|
|
|
+ <div class="code-name">&#xe7e8;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">页面代码</div>
|
|
|
+ <div class="code-name">&#xe7ef;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">演示数据参考线框</div>
|
|
|
+ <div class="code-name">&#xe7ee;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">ms标签参考</div>
|
|
|
+ <div class="code-name">&#xe7e9;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">vue参考</div>
|
|
|
+ <div class="code-name">&#xe7ea;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">ux参考</div>
|
|
|
+ <div class="code-name">&#xe7eb;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">粘贴样式</div>
|
|
|
+ <div class="code-name">&#xe7ec;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">粘贴html</div>
|
|
|
+ <div class="code-name">&#xe7ed;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">下载html代码</div>
|
|
|
+ <div class="code-name">&#xe7e7;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">css</div>
|
|
|
+ <div class="code-name">&#xe7e6;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">file-css</div>
|
|
|
+ <div class="code-name">&#xe8de;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">换行</div>
|
|
|
+ <div class="code-name">&#xe7e5;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">展开</div>
|
|
|
+ <div class="code-name">&#xe7e4;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">显示器</div>
|
|
|
+ <div class="code-name">&#xe7e3;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">模版</div>
|
|
|
+ <div class="code-name">&#xe7e2;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">删除</div>
|
|
|
+ <div class="code-name">&#xe7e1;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">展开</div>
|
|
|
+ <div class="code-name">&#xe85e;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont"></span>
|
|
|
+ <div class="name">收缩</div>
|
|
|
+ <div class="code-name">&#xe85f;</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
<span class="icon iconfont"></span>
|
|
|
<div class="name">加载</div>
|
|
|
<div class="code-name">&#xe7df;</div>
|
|
|
@@ -3121,24 +3427,20 @@
|
|
|
|
|
|
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
|
|
|
<ul>
|
|
|
- <li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
|
|
|
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
|
|
|
- <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
|
|
|
+ <li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
|
|
|
</ul>
|
|
|
<blockquote>
|
|
|
- <p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
|
|
|
+ <p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
|
|
|
</blockquote>
|
|
|
<p>Unicode 使用步骤如下:</p>
|
|
|
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
|
<pre><code class="language-css"
|
|
|
>@font-face {
|
|
|
font-family: 'iconfont';
|
|
|
- src: url('iconfont.eot');
|
|
|
- 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');
|
|
|
+ src: url('iconfont.woff2?t=1687245578202') format('woff2'),
|
|
|
+ url('iconfont.woff?t=1687245578202') format('woff'),
|
|
|
+ url('iconfont.ttf?t=1687245578202') format('truetype');
|
|
|
}
|
|
|
</code></pre>
|
|
|
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
|
|
|
@@ -3165,6 +3467,429 @@
|
|
|
<ul class="icon_lists dib-box">
|
|
|
|
|
|
<li class="dib">
|
|
|
+ <span class="icon iconfont icon-chajian"></span>
|
|
|
+ <div class="name">
|
|
|
+ 插件
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-chajian
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-bangzhu"></span>
|
|
|
+ <div class="name">
|
|
|
+ 帮助
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-bangzhu
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-logo"></span>
|
|
|
+ <div class="name">
|
|
|
+ gitbook
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-logo
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-tupian2"></span>
|
|
|
+ <div class="name">
|
|
|
+ 图片
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-tupian2
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-bianji2"></span>
|
|
|
+ <div class="name">
|
|
|
+ 编辑
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-bianji2
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-wenbenbianji"></span>
|
|
|
+ <div class="name">
|
|
|
+ 文本编辑
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-wenbenbianji
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-shijian-xianxing"></span>
|
|
|
+ <div class="name">
|
|
|
+ 217时间-线性
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-shijian-xianxing
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-tupianjianqie"></span>
|
|
|
+ <div class="name">
|
|
|
+ 图片剪切
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-tupianjianqie
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-jinqian"></span>
|
|
|
+ <div class="name">
|
|
|
+ 金钱
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-jinqian
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-chengshijilianguanli"></span>
|
|
|
+ <div class="name">
|
|
|
+ 城市级联管理
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-chengshijilianguanli
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-accessories"></span>
|
|
|
+ <div class="name">
|
|
|
+ 附件
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-accessories
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon--duoxuan"></span>
|
|
|
+ <div class="name">
|
|
|
+ 80-多选
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon--duoxuan
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-duohangwenben2"></span>
|
|
|
+ <div class="name">
|
|
|
+ 多行文本
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-duohangwenben2
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-yanse1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 颜色
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-yanse1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-dingwei1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 定位
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-dingwei1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-kaiguan1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 开关
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-kaiguan1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-icon_huakuai"></span>
|
|
|
+ <div class="name">
|
|
|
+ icon_滑块
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-icon_huakuai
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-icon_pingfen"></span>
|
|
|
+ <div class="name">
|
|
|
+ icon_评分
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-icon_pingfen
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-textEdit"></span>
|
|
|
+ <div class="name">
|
|
|
+ 富文本编辑
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-textEdit
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-bianjiqi"></span>
|
|
|
+ <div class="name">
|
|
|
+ 编辑器
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-bianjiqi
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-zhagebuju"></span>
|
|
|
+ <div class="name">
|
|
|
+ 栅格布局
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-zhagebuju
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-jishuqi"></span>
|
|
|
+ <div class="name">
|
|
|
+ 计数器
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-jishuqi
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-jilian"></span>
|
|
|
+ <div class="name">
|
|
|
+ 级联
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-jilian
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-xialaxuanze"></span>
|
|
|
+ <div class="name">
|
|
|
+ 下拉选择
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-xialaxuanze
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-liangduanduiqi2"></span>
|
|
|
+ <div class="name">
|
|
|
+ 两端对齐
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-liangduanduiqi2
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-fangkuai"></span>
|
|
|
+ <div class="name">
|
|
|
+ 方块
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-fangkuai
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-chexiao_huaban"></span>
|
|
|
+ <div class="name">
|
|
|
+ 撤销
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-chexiao_huaban
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-zhongzuo_huaban"></span>
|
|
|
+ <div class="name">
|
|
|
+ 重做
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-zhongzuo_huaban
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-xiazaimsdaima"></span>
|
|
|
+ <div class="name">
|
|
|
+ 下载ms 代码
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-xiazaimsdaima
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-jubudaima"></span>
|
|
|
+ <div class="name">
|
|
|
+ 局部代码
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-jubudaima
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-yemiandaima"></span>
|
|
|
+ <div class="name">
|
|
|
+ 页面代码
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-yemiandaima
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-yanshishujucankaoxiankuang"></span>
|
|
|
+ <div class="name">
|
|
|
+ 演示数据参考线框
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-yanshishujucankaoxiankuang
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-msbiaoqiancankao"></span>
|
|
|
+ <div class="name">
|
|
|
+ ms标签参考
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-msbiaoqiancankao
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-vuecankao"></span>
|
|
|
+ <div class="name">
|
|
|
+ vue参考
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-vuecankao
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-uxcankao"></span>
|
|
|
+ <div class="name">
|
|
|
+ ux参考
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-uxcankao
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-niantieyangshi"></span>
|
|
|
+ <div class="name">
|
|
|
+ 粘贴样式
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-niantieyangshi
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-niantiehtml"></span>
|
|
|
+ <div class="name">
|
|
|
+ 粘贴html
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-niantiehtml
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-down-html"></span>
|
|
|
+ <div class="name">
|
|
|
+ 下载html代码
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-down-html
|
|
|
+ </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-file-css"></span>
|
|
|
+ <div class="name">
|
|
|
+ file-css
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-file-css
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-huanhang1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 换行
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-huanhang1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-zhankai1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 展开
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-zhankai1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-xianshiqi"></span>
|
|
|
+ <div class="name">
|
|
|
+ 显示器
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-xianshiqi
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-moban1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 模版
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-moban1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-del"></span>
|
|
|
+ <div class="name">
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-del
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-zhankai"></span>
|
|
|
+ <div class="name">
|
|
|
+ 展开
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-zhankai
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <span class="icon iconfont icon-shousuo1"></span>
|
|
|
+ <div class="name">
|
|
|
+ 收缩
|
|
|
+ </div>
|
|
|
+ <div class="code-name">.icon-shousuo1
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
<span class="icon iconfont icon-jiazai1"></span>
|
|
|
<div class="name">
|
|
|
加载
|
|
|
@@ -7798,10 +8523,8 @@
|
|
|
<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>
|
|
|
@@ -7821,6 +8544,382 @@
|
|
|
|
|
|
<li class="dib">
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-chajian"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">插件</div>
|
|
|
+ <div class="code-name">#icon-chajian</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-bangzhu"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">帮助</div>
|
|
|
+ <div class="code-name">#icon-bangzhu</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-logo"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">gitbook</div>
|
|
|
+ <div class="code-name">#icon-logo</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-tupian2"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">图片</div>
|
|
|
+ <div class="code-name">#icon-tupian2</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-bianji2"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">编辑</div>
|
|
|
+ <div class="code-name">#icon-bianji2</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-wenbenbianji"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">文本编辑</div>
|
|
|
+ <div class="code-name">#icon-wenbenbianji</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-shijian-xianxing"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">217时间-线性</div>
|
|
|
+ <div class="code-name">#icon-shijian-xianxing</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-tupianjianqie"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">图片剪切</div>
|
|
|
+ <div class="code-name">#icon-tupianjianqie</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-jinqian"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">金钱</div>
|
|
|
+ <div class="code-name">#icon-jinqian</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-chengshijilianguanli"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">城市级联管理</div>
|
|
|
+ <div class="code-name">#icon-chengshijilianguanli</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-accessories"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">附件</div>
|
|
|
+ <div class="code-name">#icon-accessories</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon--duoxuan"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">80-多选</div>
|
|
|
+ <div class="code-name">#icon--duoxuan</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-duohangwenben2"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">多行文本</div>
|
|
|
+ <div class="code-name">#icon-duohangwenben2</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-yanse1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">颜色</div>
|
|
|
+ <div class="code-name">#icon-yanse1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-dingwei1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">定位</div>
|
|
|
+ <div class="code-name">#icon-dingwei1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-kaiguan1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">开关</div>
|
|
|
+ <div class="code-name">#icon-kaiguan1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-icon_huakuai"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">icon_滑块</div>
|
|
|
+ <div class="code-name">#icon-icon_huakuai</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-icon_pingfen"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">icon_评分</div>
|
|
|
+ <div class="code-name">#icon-icon_pingfen</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-textEdit"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">富文本编辑</div>
|
|
|
+ <div class="code-name">#icon-textEdit</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-bianjiqi"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">编辑器</div>
|
|
|
+ <div class="code-name">#icon-bianjiqi</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-zhagebuju"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">栅格布局</div>
|
|
|
+ <div class="code-name">#icon-zhagebuju</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-jishuqi"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">计数器</div>
|
|
|
+ <div class="code-name">#icon-jishuqi</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-jilian"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">级联</div>
|
|
|
+ <div class="code-name">#icon-jilian</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xialaxuanze"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">下拉选择</div>
|
|
|
+ <div class="code-name">#icon-xialaxuanze</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-liangduanduiqi2"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">两端对齐</div>
|
|
|
+ <div class="code-name">#icon-liangduanduiqi2</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-fangkuai"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">方块</div>
|
|
|
+ <div class="code-name">#icon-fangkuai</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-chexiao_huaban"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">撤销</div>
|
|
|
+ <div class="code-name">#icon-chexiao_huaban</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-zhongzuo_huaban"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">重做</div>
|
|
|
+ <div class="code-name">#icon-zhongzuo_huaban</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xiazaimsdaima"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">下载ms 代码</div>
|
|
|
+ <div class="code-name">#icon-xiazaimsdaima</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-jubudaima"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">局部代码</div>
|
|
|
+ <div class="code-name">#icon-jubudaima</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-yemiandaima"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">页面代码</div>
|
|
|
+ <div class="code-name">#icon-yemiandaima</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-yanshishujucankaoxiankuang"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">演示数据参考线框</div>
|
|
|
+ <div class="code-name">#icon-yanshishujucankaoxiankuang</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-msbiaoqiancankao"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">ms标签参考</div>
|
|
|
+ <div class="code-name">#icon-msbiaoqiancankao</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-vuecankao"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">vue参考</div>
|
|
|
+ <div class="code-name">#icon-vuecankao</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-uxcankao"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">ux参考</div>
|
|
|
+ <div class="code-name">#icon-uxcankao</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-niantieyangshi"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">粘贴样式</div>
|
|
|
+ <div class="code-name">#icon-niantieyangshi</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-niantiehtml"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">粘贴html</div>
|
|
|
+ <div class="code-name">#icon-niantiehtml</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-down-html"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">下载html代码</div>
|
|
|
+ <div class="code-name">#icon-down-html</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-file-css"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">file-css</div>
|
|
|
+ <div class="code-name">#icon-file-css</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-huanhang1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">换行</div>
|
|
|
+ <div class="code-name">#icon-huanhang1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-zhankai1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">展开</div>
|
|
|
+ <div class="code-name">#icon-zhankai1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xianshiqi"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">显示器</div>
|
|
|
+ <div class="code-name">#icon-xianshiqi</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-moban1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">模版</div>
|
|
|
+ <div class="code-name">#icon-moban1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-del"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">删除</div>
|
|
|
+ <div class="code-name">#icon-del</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-zhankai"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">展开</div>
|
|
|
+ <div class="code-name">#icon-zhankai</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-shousuo1"></use>
|
|
|
+ </svg>
|
|
|
+ <div class="name">收缩</div>
|
|
|
+ <div class="code-name">#icon-shousuo1</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dib">
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
<use xlink:href="#icon-jiazai1"></use>
|
|
|
</svg>
|
|
|
<div class="name">加载</div>
|