|
|
|
@ -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/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">
|
|
|
|
@ -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>
|
|
|
|
@ -30,6 +54,138 @@
|
|
|
|
|
<div class="content unicode" style="display: block;">
|
|
|
|
|
<ul class="icon_lists dib-box">
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">excel</div>
|
|
|
|
|
<div class="code-name">&#xe650;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">保存</div>
|
|
|
|
|
<div class="code-name">&#xe737;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">关 闭</div>
|
|
|
|
|
<div class="code-name">&#xe6c5;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">pdf</div>
|
|
|
|
|
<div class="code-name">&#xe614;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">复制</div>
|
|
|
|
|
<div class="code-name">&#xe61e;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">020空心饼图</div>
|
|
|
|
|
<div class="code-name">&#xe78c;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">时间</div>
|
|
|
|
|
<div class="code-name">&#xe662;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">保存</div>
|
|
|
|
|
<div class="code-name">&#xe6f6;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">图片</div>
|
|
|
|
|
<div class="code-name">&#xe612;</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">&#xe65f;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">文本</div>
|
|
|
|
|
<div class="code-name">&#xe605;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">视频</div>
|
|
|
|
|
<div class="code-name">&#xecc1;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">框架</div>
|
|
|
|
|
<div class="code-name">&#xe66a;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">预览</div>
|
|
|
|
|
<div class="code-name">&#xe728;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">横向文字</div>
|
|
|
|
|
<div class="code-name">&#xe601;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">图表 _饼图</div>
|
|
|
|
|
<div class="code-name">&#xe602;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">漏斗图</div>
|
|
|
|
|
<div class="code-name">&#xe6d5;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">图表 折线图</div>
|
|
|
|
|
<div class="code-name">&#xe630;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">柱线图</div>
|
|
|
|
|
<div class="code-name">&#xe607;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">图片</div>
|
|
|
|
|
<div class="code-name">&#xe81d;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">仪表盘</div>
|
|
|
|
|
<div class="code-name">&#xe706;</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont"></span>
|
|
|
|
|
<div class="name">返回</div>
|
|
|
|
@ -493,24 +649,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=1624608582557') format('woff2'),
|
|
|
|
|
url('iconfont.woff?t=1624608582557') format('woff'),
|
|
|
|
|
url('iconfont.ttf?t=1624608582557') format('truetype');
|
|
|
|
|
}
|
|
|
|
|
</code></pre>
|
|
|
|
|
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
|
|
|
|
@ -536,6 +688,204 @@
|
|
|
|
|
<div class="content font-class">
|
|
|
|
|
<ul class="icon_lists dib-box">
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconexcel"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
excel
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconexcel
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconbaocun"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
保存
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconbaocun
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconguanbi"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
关 闭
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconguanbi
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconpdf"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
pdf
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconpdf
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconfuzhi"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
复制
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconfuzhi
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont icon020kongxinbingtu"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
020空心饼图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.icon020kongxinbingtu
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconshijian"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
时间
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconshijian
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconsave"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
保存
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconsave
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont icontupian"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
图片
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.icontupian
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconzhuzhuangtu"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
柱状图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconzhuzhuangtu
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconchaolianjie"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
超链接
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconchaolianjie
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconziyuan"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
文本
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconziyuan
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconshipin"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
视频
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconshipin
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconkuangjia"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
框架
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconkuangjia
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconyulan"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
预览
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconyulan
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconhengxiangwenzi"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
横向文字
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconhengxiangwenzi
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconicon_tubiao_bingtu"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
图表 _饼图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconicon_tubiao_bingtu
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconloudoutu"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
漏斗图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconloudoutu
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont icontubiaozhexiantu"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
图表 折线图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.icontubiaozhexiantu
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconzhuxiantu"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
柱线图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconzhuxiantu
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont icontupian1"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
图片
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.icontupian1
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont iconyibiaopan"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
|
仪表盘
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-name">.iconyibiaopan
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<span class="icon iconfont icon1"></span>
|
|
|
|
|
<div class="name">
|
|
|
|
@ -1228,10 +1578,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>
|
|
|
|
@ -1249,6 +1597,182 @@
|
|
|
|
|
<div class="content symbol">
|
|
|
|
|
<ul class="icon_lists dib-box">
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconexcel"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">excel</div>
|
|
|
|
|
<div class="code-name">#iconexcel</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconbaocun"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">保存</div>
|
|
|
|
|
<div class="code-name">#iconbaocun</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconguanbi"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">关 闭</div>
|
|
|
|
|
<div class="code-name">#iconguanbi</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconpdf"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">pdf</div>
|
|
|
|
|
<div class="code-name">#iconpdf</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconfuzhi"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">复制</div>
|
|
|
|
|
<div class="code-name">#iconfuzhi</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#icon020kongxinbingtu"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">020空心饼图</div>
|
|
|
|
|
<div class="code-name">#icon020kongxinbingtu</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconshijian"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">时间</div>
|
|
|
|
|
<div class="code-name">#iconshijian</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconsave"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">保存</div>
|
|
|
|
|
<div class="code-name">#iconsave</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#icontupian"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">图片</div>
|
|
|
|
|
<div class="code-name">#icontupian</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconzhuzhuangtu"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">柱状图</div>
|
|
|
|
|
<div class="code-name">#iconzhuzhuangtu</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconchaolianjie"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">超链接</div>
|
|
|
|
|
<div class="code-name">#iconchaolianjie</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconziyuan"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">文本</div>
|
|
|
|
|
<div class="code-name">#iconziyuan</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconshipin"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">视频</div>
|
|
|
|
|
<div class="code-name">#iconshipin</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconkuangjia"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">框架</div>
|
|
|
|
|
<div class="code-name">#iconkuangjia</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconyulan"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">预览</div>
|
|
|
|
|
<div class="code-name">#iconyulan</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconhengxiangwenzi"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">横向文字</div>
|
|
|
|
|
<div class="code-name">#iconhengxiangwenzi</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconicon_tubiao_bingtu"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">图表 _饼图</div>
|
|
|
|
|
<div class="code-name">#iconicon_tubiao_bingtu</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconloudoutu"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">漏斗图</div>
|
|
|
|
|
<div class="code-name">#iconloudoutu</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#icontubiaozhexiantu"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">图表 折线图</div>
|
|
|
|
|
<div class="code-name">#icontubiaozhexiantu</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconzhuxiantu"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">柱线图</div>
|
|
|
|
|
<div class="code-name">#iconzhuxiantu</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#icontupian1"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">图片</div>
|
|
|
|
|
<div class="code-name">#icontupian1</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#iconyibiaopan"></use>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="name">仪表盘</div>
|
|
|
|
|
<div class="code-name">#iconyibiaopan</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="dib">
|
|
|
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#icon1"></use>
|
|
|
|
|