herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
数通互联化工云平台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
710 Commits
62 Branches
0 Tags
99 MiB
 
 
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
ShutongInterconnectedChemic.../static/iconfont/demo_index.html

1959 lines
66 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<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">
<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=2578019" 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">&#xe60b;</span>
<div class="name">箭头</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cf;</span>
<div class="name">手，手势</div>
<div class="code-name">&amp;#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d6;</span>
<div class="name">24gl-unlock4</div>
<div class="code-name">&amp;#xe9d6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe669;</span>
<div class="name">解锁</div>
<div class="code-name">&amp;#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xebcd;</span>
<div class="name">眼睛_隐藏_o</div>
<div class="code-name">&amp;#xebcd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe673;</span>
<div class="name">设置边框</div>
<div class="code-name">&amp;#xe673;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">文字边框</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe801;</span>
<div class="name">m-滚动文字</div>
<div class="code-name">&amp;#xe801;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe606;</span>
<div class="name">发起的</div>
<div class="code-name">&amp;#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68c;</span>
<div class="name">工作台</div>
<div class="code-name">&amp;#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xebb1;</span>
<div class="name">待办任务_o</div>
<div class="code-name">&amp;#xebb1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe633;</span>
<div class="name">我发起的</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">我的已办</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe690;</span>
<div class="name">符号-按钮</div>
<div class="code-name">&amp;#xe690;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">设计</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">数据源管理</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">审批</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">抄送</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe993;</span>
<div class="name">代码,分支,分流,分叉</div>
<div class="code-name">&amp;#xe993;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7d0;</span>
<div class="name">文档</div>
<div class="code-name">&amp;#xe7d0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">系统管理</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe661;</span>
<div class="name">创建图表</div>
<div class="code-name">&amp;#xe661;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">可视化</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">菜单</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66b;</span>
<div class="name">icon-user</div>
<div class="code-name">&amp;#xe66b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">表单管理</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xec6b;</span>
<div class="name">列表</div>
<div class="code-name">&amp;#xec6b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">操作日志</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">字典管理</div>
<div class="code-name">&amp;#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe658;</span>
<div class="name">岗位</div>
<div class="code-name">&amp;#xe658;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">角色管理</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea45;</span>
<div class="name">管理登录日志</div>
<div class="code-name">&amp;#xea45;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">系统工具</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ce;</span>
<div class="name">柱状图</div>
<div class="code-name">&amp;#xe6ce;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe902;</span>
<div class="name">407饼图</div>
<div class="code-name">&amp;#xe902;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xec66;</span>
<div class="name">折线图</div>
<div class="code-name">&amp;#xec66;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe892;</span>
<div class="name">Directory tree</div>
<div class="code-name">&amp;#xe892;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">流式布局</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">divide</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xebb3;</span>
<div class="name">树状图_o</div>
<div class="code-name">&amp;#xebb3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">时间</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66f;</span>
<div class="name">富文本框</div>
<div class="code-name">&amp;#xe66f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69d;</span>
<div class="name">评分</div>
<div class="code-name">&amp;#xe69d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">滑块</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe638;</span>
<div class="name">分割线</div>
<div class="code-name">&amp;#xe638;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xee22;</span>
<div class="name">颜色库</div>
<div class="code-name">&amp;#xee22;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">导入</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63e;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">卡片</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">help</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a9;</span>
<div class="name">table</div>
<div class="code-name">&amp;#xe6a9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">component</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">11.符号-级联选择</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">cascader</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe647;</span>
<div class="name">计数器</div>
<div class="code-name">&amp;#xe647;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">标题</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d4;</span>
<div class="name">bootstrap_tabs</div>
<div class="code-name">&amp;#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">加号</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">arrow on</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c1;</span>
<div class="name">check</div>
<div class="code-name">&amp;#xe6c1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69a;</span>
<div class="name">vue</div>
<div class="code-name">&amp;#xe69a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe646;</span>
<div class="name">开关</div>
<div class="code-name">&amp;#xe646;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">保存</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe696;</span>
<div class="name">move</div>
<div class="code-name">&amp;#xe696;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe692;</span>
<div class="name">clone</div>
<div class="code-name">&amp;#xe692;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67d;</span>
<div class="name">删 除 (1)</div>
<div class="code-name">&amp;#xe67d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">eye</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">json</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">GRID</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">文字</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64c;</span>
<div class="name">date</div>
<div class="code-name">&amp;#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">input</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">check_box-24px</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">textarea</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b1;</span>
<div class="name">radio</div>
<div class="code-name">&amp;#xe6b1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64d;</span>
<div class="name">下拉选择</div>
<div class="code-name">&amp;#xe64d;</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=1683511822799') format('woff2'),
url('iconfont.woff?t=1683511822799') format('woff'),
url('iconfont.ttf?t=1683511822799') 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"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-mouse"></span>
<div class="name">
箭头
</div>
<div class="code-name">.icon-mouse
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hand"></span>
<div class="name">
手，手势
</div>
<div class="code-name">.icon-hand
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lock-open"></span>
<div class="name">
24gl-unlock4
</div>
<div class="code-name">.icon-lock-open
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lock"></span>
<div class="name">
解锁
</div>
<div class="code-name">.icon-lock
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-eye-close"></span>
<div class="name">
眼睛_隐藏_o
</div>
<div class="code-name">.icon-eye-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-border"></span>
<div class="name">
设置边框
</div>
<div class="code-name">.icon-border
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-text2"></span>
<div class="name">
文字边框
</div>
<div class="code-name">.icon-text2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-stext"></span>
<div class="name">
m-滚动文字
</div>
<div class="code-name">.icon-stext
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-apply"></span>
<div class="name">
发起的
</div>
<div class="code-name">.icon-apply
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-work"></span>
<div class="name">
工作台
</div>
<div class="code-name">.icon-work
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-todo"></span>
<div class="name">
待办任务_o
</div>
<div class="code-name">.icon-todo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-applyed"></span>
<div class="name">
我发起的
</div>
<div class="code-name">.icon-applyed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-done"></span>
<div class="name">
我的已办
</div>
<div class="code-name">.icon-done
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-button"></span>
<div class="name">
符号-按钮
</div>
<div class="code-name">.icon-button
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-design"></span>
<div class="name">
设计
</div>
<div class="code-name">.icon-design
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-data-source"></span>
<div class="name">
数据源管理
</div>
<div class="code-name">.icon-data-source
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sp"></span>
<div class="name">
审批
</div>
<div class="code-name">.icon-sp
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cs"></span>
<div class="name">
抄送
</div>
<div class="code-name">.icon-cs
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-branch"></span>
<div class="name">
代码,分支,分流,分叉
</div>
<div class="code-name">.icon-branch
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-doc"></span>
<div class="name">
文档
</div>
<div class="code-name">.icon-doc
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sys"></span>
<div class="name">
系统管理
</div>
<div class="code-name">.icon-sys
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-creat"></span>
<div class="name">
创建图表
</div>
<div class="code-name">.icon-creat
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-data"></span>
<div class="name">
可视化
</div>
<div class="code-name">.icon-data
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-menu"></span>
<div class="name">
菜单
</div>
<div class="code-name">.icon-menu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-user"></span>
<div class="name">
icon-user
</div>
<div class="code-name">.icon-user
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-form"></span>
<div class="name">
表单管理
</div>
<div class="code-name">.icon-form
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-list"></span>
<div class="name">
列表
</div>
<div class="code-name">.icon-list
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-log"></span>
<div class="name">
操作日志
</div>
<div class="code-name">.icon-log
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dict"></span>
<div class="name">
字典管理
</div>
<div class="code-name">.icon-dict
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-post"></span>
<div class="name">
岗位
</div>
<div class="code-name">.icon-post
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-role"></span>
<div class="name">
角色管理
</div>
<div class="code-name">.icon-role
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-log2"></span>
<div class="name">
管理登录日志
</div>
<div class="code-name">.icon-log2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tool"></span>
<div class="name">
系统工具
</div>
<div class="code-name">.icon-tool
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bar"></span>
<div class="name">
柱状图
</div>
<div class="code-name">.icon-bar
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pie"></span>
<div class="name">
407饼图
</div>
<div class="code-name">.icon-pie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-line"></span>
<div class="name">
折线图
</div>
<div class="code-name">.icon-line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tree2"></span>
<div class="name">
Directory tree
</div>
<div class="code-name">.icon-tree2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-flex"></span>
<div class="name">
流式布局
</div>
<div class="code-name">.icon-flex
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-div"></span>
<div class="name">
divide
</div>
<div class="code-name">.icon-div
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tree"></span>
<div class="name">
树状图_o
</div>
<div class="code-name">.icon-tree
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-time"></span>
<div class="name">
时间
</div>
<div class="code-name">.icon-time
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tinymce"></span>
<div class="name">
富文本框
</div>
<div class="code-name">.icon-tinymce
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-rate"></span>
<div class="name">
评分
</div>
<div class="code-name">.icon-rate
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-slider"></span>
<div class="name">
滑块
</div>
<div class="code-name">.icon-slider
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-divider"></span>
<div class="name">
分割线
</div>
<div class="code-name">.icon-divider
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-color"></span>
<div class="name">
颜色库
</div>
<div class="code-name">.icon-color
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-import"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-import
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-image"></span>
<div class="name">
图片
</div>
<div class="code-name">.icon-image
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-card"></span>
<div class="name">
卡片
</div>
<div class="code-name">.icon-card
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-help"></span>
<div class="name">
help
</div>
<div class="code-name">.icon-help
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-table"></span>
<div class="name">
table
</div>
<div class="code-name">.icon-table
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-component"></span>
<div class="name">
component
</div>
<div class="code-name">.icon-component
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-link"></span>
<div class="name">
11.符号-级联选择
</div>
<div class="code-name">.icon-link
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cascader"></span>
<div class="name">
cascader
</div>
<div class="code-name">.icon-cascader
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-number"></span>
<div class="name">
计数器
</div>
<div class="code-name">.icon-number
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-title"></span>
<div class="name">
标题
</div>
<div class="code-name">.icon-title
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tabs"></span>
<div class="name">
bootstrap_tabs
</div>
<div class="code-name">.icon-tabs
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close"></span>
<div class="name">
close
</div>
<div class="code-name">.icon-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-plus"></span>
<div class="name">
加号
</div>
<div class="code-name">.icon-plus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow"></span>
<div class="name">
arrow on
</div>
<div class="code-name">.icon-arrow
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-check"></span>
<div class="name">
check
</div>
<div class="code-name">.icon-check
</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-switch"></span>
<div class="name">
开关
</div>
<div class="code-name">.icon-switch
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-save"></span>
<div class="name">
保存
</div>
<div class="code-name">.icon-save
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-move"></span>
<div class="name">
move
</div>
<div class="code-name">.icon-move
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clone"></span>
<div class="name">
clone
</div>
<div class="code-name">.icon-clone
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-del"></span>
<div class="name">
删 除 (1)
</div>
<div class="code-name">.icon-del
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-eye"></span>
<div class="name">
eye
</div>
<div class="code-name">.icon-eye
</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-grid"></span>
<div class="name">
GRID
</div>
<div class="code-name">.icon-grid
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-text"></span>
<div class="name">
文字
</div>
<div class="code-name">.icon-text
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-date"></span>
<div class="name">
date
</div>
<div class="code-name">.icon-date
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-input"></span>
<div class="name">
input
</div>
<div class="code-name">.icon-input
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-checkbox"></span>
<div class="name">
check_box-24px
</div>
<div class="code-name">.icon-checkbox
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-textarea"></span>
<div class="name">
textarea
</div>
<div class="code-name">.icon-textarea
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-radio"></span>
<div class="name">
radio
</div>
<div class="code-name">.icon-radio
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-select"></span>
<div class="name">
下拉选择
</div>
<div class="code-name">.icon-select
</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">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mouse"></use>
</svg>
<div class="name">箭头</div>
<div class="code-name">#icon-mouse</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-hand"></use>
</svg>
<div class="name">手，手势</div>
<div class="code-name">#icon-hand</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-lock-open"></use>
</svg>
<div class="name">24gl-unlock4</div>
<div class="code-name">#icon-lock-open</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-lock"></use>
</svg>
<div class="name">解锁</div>
<div class="code-name">#icon-lock</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-eye-close"></use>
</svg>
<div class="name">眼睛_隐藏_o</div>
<div class="code-name">#icon-eye-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-border"></use>
</svg>
<div class="name">设置边框</div>
<div class="code-name">#icon-border</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-text2"></use>
</svg>
<div class="name">文字边框</div>
<div class="code-name">#icon-text2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-stext"></use>
</svg>
<div class="name">m-滚动文字</div>
<div class="code-name">#icon-stext</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-apply"></use>
</svg>
<div class="name">发起的</div>
<div class="code-name">#icon-apply</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-work"></use>
</svg>
<div class="name">工作台</div>
<div class="code-name">#icon-work</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-todo"></use>
</svg>
<div class="name">待办任务_o</div>
<div class="code-name">#icon-todo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-applyed"></use>
</svg>
<div class="name">我发起的</div>
<div class="code-name">#icon-applyed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-done"></use>
</svg>
<div class="name">我的已办</div>
<div class="code-name">#icon-done</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-button"></use>
</svg>
<div class="name">符号-按钮</div>
<div class="code-name">#icon-button</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-design"></use>
</svg>
<div class="name">设计</div>
<div class="code-name">#icon-design</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-data-source"></use>
</svg>
<div class="name">数据源管理</div>
<div class="code-name">#icon-data-source</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sp"></use>
</svg>
<div class="name">审批</div>
<div class="code-name">#icon-sp</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cs"></use>
</svg>
<div class="name">抄送</div>
<div class="code-name">#icon-cs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-branch"></use>
</svg>
<div class="name">代码,分支,分流,分叉</div>
<div class="code-name">#icon-branch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-doc"></use>
</svg>
<div class="name">文档</div>
<div class="code-name">#icon-doc</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sys"></use>
</svg>
<div class="name">系统管理</div>
<div class="code-name">#icon-sys</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-creat"></use>
</svg>
<div class="name">创建图表</div>
<div class="code-name">#icon-creat</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-data"></use>
</svg>
<div class="name">可视化</div>
<div class="code-name">#icon-data</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-menu"></use>
</svg>
<div class="name">菜单</div>
<div class="code-name">#icon-menu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
<div class="name">icon-user</div>
<div class="code-name">#icon-user</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-form"></use>
</svg>
<div class="name">表单管理</div>
<div class="code-name">#icon-form</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-list"></use>
</svg>
<div class="name">列表</div>
<div class="code-name">#icon-list</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-log"></use>
</svg>
<div class="name">操作日志</div>
<div class="code-name">#icon-log</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dict"></use>
</svg>
<div class="name">字典管理</div>
<div class="code-name">#icon-dict</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-post"></use>
</svg>
<div class="name">岗位</div>
<div class="code-name">#icon-post</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-role"></use>
</svg>
<div class="name">角色管理</div>
<div class="code-name">#icon-role</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-log2"></use>
</svg>
<div class="name">管理登录日志</div>
<div class="code-name">#icon-log2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tool"></use>
</svg>
<div class="name">系统工具</div>
<div class="code-name">#icon-tool</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bar"></use>
</svg>
<div class="name">柱状图</div>
<div class="code-name">#icon-bar</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pie"></use>
</svg>
<div class="name">407饼图</div>
<div class="code-name">#icon-pie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-line"></use>
</svg>
<div class="name">折线图</div>
<div class="code-name">#icon-line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tree2"></use>
</svg>
<div class="name">Directory tree</div>
<div class="code-name">#icon-tree2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-flex"></use>
</svg>
<div class="name">流式布局</div>
<div class="code-name">#icon-flex</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-div"></use>
</svg>
<div class="name">divide</div>
<div class="code-name">#icon-div</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tree"></use>
</svg>
<div class="name">树状图_o</div>
<div class="code-name">#icon-tree</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-time"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#icon-time</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tinymce"></use>
</svg>
<div class="name">富文本框</div>
<div class="code-name">#icon-tinymce</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-rate"></use>
</svg>
<div class="name">评分</div>
<div class="code-name">#icon-rate</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-slider"></use>
</svg>
<div class="name">滑块</div>
<div class="code-name">#icon-slider</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-divider"></use>
</svg>
<div class="name">分割线</div>
<div class="code-name">#icon-divider</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-color"></use>
</svg>
<div class="name">颜色库</div>
<div class="code-name">#icon-color</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-import"></use>
</svg>
<div class="name">导入</div>
<div class="code-name">#icon-import</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-image"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icon-image</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-card"></use>
</svg>
<div class="name">卡片</div>
<div class="code-name">#icon-card</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-help"></use>
</svg>
<div class="name">help</div>
<div class="code-name">#icon-help</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-table"></use>
</svg>
<div class="name">table</div>
<div class="code-name">#icon-table</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-component"></use>
</svg>
<div class="name">component</div>
<div class="code-name">#icon-component</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-link"></use>
</svg>
<div class="name">11.符号-级联选择</div>
<div class="code-name">#icon-link</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cascader"></use>
</svg>
<div class="name">cascader</div>
<div class="code-name">#icon-cascader</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-number"></use>
</svg>
<div class="name">计数器</div>
<div class="code-name">#icon-number</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-title"></use>
</svg>
<div class="name">标题</div>
<div class="code-name">#icon-title</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tabs"></use>
</svg>
<div class="name">bootstrap_tabs</div>
<div class="code-name">#icon-tabs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">close</div>
<div class="code-name">#icon-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg>
<div class="name">加号</div>
<div class="code-name">#icon-plus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow"></use>
</svg>
<div class="name">arrow on</div>
<div class="code-name">#icon-arrow</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-check"></use>
</svg>
<div class="name">check</div>
<div class="code-name">#icon-check</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-switch"></use>
</svg>
<div class="name">开关</div>
<div class="code-name">#icon-switch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-save"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#icon-save</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-move"></use>
</svg>
<div class="name">move</div>
<div class="code-name">#icon-move</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clone"></use>
</svg>
<div class="name">clone</div>
<div class="code-name">#icon-clone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-del"></use>
</svg>
<div class="name">删 除 (1)</div>
<div class="code-name">#icon-del</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-eye"></use>
</svg>
<div class="name">eye</div>
<div class="code-name">#icon-eye</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-grid"></use>
</svg>
<div class="name">GRID</div>
<div class="code-name">#icon-grid</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-text"></use>
</svg>
<div class="name">文字</div>
<div class="code-name">#icon-text</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-date"></use>
</svg>
<div class="name">date</div>
<div class="code-name">#icon-date</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-input"></use>
</svg>
<div class="name">input</div>
<div class="code-name">#icon-input</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-checkbox"></use>
</svg>
<div class="name">check_box-24px</div>
<div class="code-name">#icon-checkbox</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-textarea"></use>
</svg>
<div class="name">textarea</div>
<div class="code-name">#icon-textarea</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-radio"></use>
</svg>
<div class="name">radio</div>
<div class="code-name">#icon-radio</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-select"></use>
</svg>
<div class="name">下拉选择</div>
<div class="code-name">#icon-select</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>