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.
2010 lines
70 KiB
2010 lines
70 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<title>IconFont Demo</title> |
|
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
|
<link rel="stylesheet" href="demo.css"> |
|
<link rel="stylesheet" href="iconfont.css"> |
|
<script src="iconfont.js"></script> |
|
<!-- jQuery --> |
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
|
<!-- 代码高亮 --> |
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
|
</head> |
|
<body> |
|
<div class="main"> |
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></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=823094" target="_blank" class="nav-more">查看项目</a> |
|
|
|
</div> |
|
<div class="tab-container"> |
|
<div class="content unicode" style="display: block;"> |
|
<ul class="icon_lists dib-box"> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">编辑修改</div> |
|
<div class="code-name">&#xe601;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">失败</div> |
|
<div class="code-name">&#xe626;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">等待</div> |
|
<div class="code-name">&#xe62a;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">刷新</div> |
|
<div class="code-name">&#xe6c2;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">启动</div> |
|
<div class="code-name">&#xe60b;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">gantt</div> |
|
<div class="code-name">&#xe694;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">工作流程图</div> |
|
<div class="code-name">&#xe600;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">成功已解决-</div> |
|
<div class="code-name">&#xe6d4;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">首页</div> |
|
<div class="code-name">&#xe61d;</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">删除</div> |
|
<div class="code-name">&#xe611;</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">&#xe7c4;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">运行中</div> |
|
<div class="code-name">&#xe6bb;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">设置 设定 配置 齿轮</div> |
|
<div class="code-name">&#xe80f;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">指缘刷新9</div> |
|
<div class="code-name">&#xe633;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">tip</div> |
|
<div class="code-name">&#xe693;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">单箭头直线</div> |
|
<div class="code-name">&#xe61c;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">全屏</div> |
|
<div class="code-name">&#xe6e0;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">全屏</div> |
|
<div class="code-name">&#xe660;</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">&#xe638;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">暂停</div> |
|
<div class="code-name">&#xe677;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">暂停</div> |
|
<div class="code-name">&#xe679;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">用户</div> |
|
<div class="code-name">&#xe629;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">文件夹</div> |
|
<div class="code-name">&#xe768;</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">&#xe671;</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">&#xe723;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">下载</div> |
|
<div class="code-name">&#xe610;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">IT监控</div> |
|
<div class="code-name">&#xe65f;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">修改信息</div> |
|
<div class="code-name">&#xe60d;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">remove</div> |
|
<div class="code-name">&#xe60e;</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">&#xe631;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">添加</div> |
|
<div class="code-name">&#xe636;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">退出 #8f8f8f & 14px</div> |
|
<div class="code-name">&#xe60c;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">icon_禁止</div> |
|
<div class="code-name">&#xe63e;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">1116加载中</div> |
|
<div class="code-name">&#xe6af;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">勾</div> |
|
<div class="code-name">&#xe651;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">沙漏</div> |
|
<div class="code-name">&#xe62e;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">停止</div> |
|
<div class="code-name">&#xe6e6;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">定时器</div> |
|
<div class="code-name">&#xe75e;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">箭头</div> |
|
<div class="code-name">&#xe632;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">停止</div> |
|
<div class="code-name">&#xe6ae;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">运算-等于</div> |
|
<div class="code-name">&#xe604;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">编辑</div> |
|
<div class="code-name">&#xe603;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">项目管理</div> |
|
<div class="code-name">&#xe635;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">依赖关系</div> |
|
<div class="code-name">&#xe68c;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">二级-下线记录</div> |
|
<div class="code-name">&#xeab6;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">代码</div> |
|
<div class="code-name">&#xe63b;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">文档下载</div> |
|
<div class="code-name">&#xe628;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">历史</div> |
|
<div class="code-name">&#xe6ee;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">放大</div> |
|
<div class="code-name">&#xe60a;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">缩小</div> |
|
<div class="code-name">&#xe60f;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">导航</div> |
|
<div class="code-name">&#xe609;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">时间管理</div> |
|
<div class="code-name">&#xe61a;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">数据库</div> |
|
<div class="code-name">&#xeef4;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">调度中心</div> |
|
<div class="code-name">&#xe692;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">鼠标指针</div> |
|
<div class="code-name">&#xe781;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">圆点</div> |
|
<div class="code-name">&#xe7c2;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">24-Tree-Structure</div> |
|
<div class="code-name">&#xe637;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">下</div> |
|
<div class="code-name">&#xe61b;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">暂停</div> |
|
<div class="code-name">&#xe614;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">用户</div> |
|
<div class="code-name">&#xe64a;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">删除</div> |
|
<div class="code-name">&#xe6ce;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">关 闭</div> |
|
<div class="code-name">&#xe6e2;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">15.错误、关闭、失败</div> |
|
<div class="code-name">&#xe75d;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">分页向左</div> |
|
<div class="code-name">&#xe652;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">分页向左</div> |
|
<div class="code-name">&#xeef5;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">日志设置</div> |
|
<div class="code-name">&#xe613;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">刷新</div> |
|
<div class="code-name">&#xe615;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">暂停</div> |
|
<div class="code-name">&#xe688;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">时间分类</div> |
|
<div class="code-name">&#xe6dd;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">二级-下线记录</div> |
|
<div class="code-name">&#xeef6;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">调度中心</div> |
|
<div class="code-name">&#xeef7;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">树型</div> |
|
<div class="code-name">&#xe7a5;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">LOGO-2</div> |
|
<div class="code-name">&#xe639;</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont"></span> |
|
<div class="name">箭头</div> |
|
<div class="code-name">&#xeef8;</div> |
|
</li> |
|
|
|
</ul> |
|
<div class="article markdown"> |
|
<h2 id="unicode-">Unicode 引用</h2> |
|
<hr> |
|
|
|
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> |
|
<ul> |
|
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> |
|
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
|
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
|
</ul> |
|
<blockquote> |
|
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> |
|
</blockquote> |
|
<p>Unicode 使用步骤如下:</p> |
|
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> |
|
<pre><code class="language-css" |
|
>@font-face { |
|
font-family: 'iconfont'; |
|
src: url('iconfont.eot'); |
|
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
|
url('iconfont.woff2') format('woff2'), |
|
url('iconfont.woff') format('woff'), |
|
url('iconfont.ttf') format('truetype'), |
|
url('iconfont.svg#iconfont') format('svg'); |
|
} |
|
</code></pre> |
|
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> |
|
<pre><code class="language-css" |
|
>.iconfont { |
|
font-family: "iconfont" !important; |
|
font-size: 16px; |
|
font-style: normal; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
</code></pre> |
|
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
|
<pre> |
|
<code class="language-html" |
|
><span class="iconfont">&#x33;</span> |
|
</code></pre> |
|
<blockquote> |
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
|
</blockquote> |
|
</div> |
|
</div> |
|
<div class="content font-class"> |
|
<ul class="icon_lists dib-box"> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-bianjixiugai"></span> |
|
<div class="name"> |
|
编辑修改 |
|
</div> |
|
<div class="code-name">.icon-bianjixiugai |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shibai"></span> |
|
<div class="name"> |
|
失败 |
|
</div> |
|
<div class="code-name">.icon-shibai |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-dengdai"></span> |
|
<div class="name"> |
|
等待 |
|
</div> |
|
<div class="code-name">.icon-dengdai |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shuaxin1"></span> |
|
<div class="name"> |
|
刷新 |
|
</div> |
|
<div class="code-name">.icon-shuaxin1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-qidong"></span> |
|
<div class="name"> |
|
启动 |
|
</div> |
|
<div class="code-name">.icon-qidong |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-gantt"></span> |
|
<div class="name"> |
|
gantt |
|
</div> |
|
<div class="code-name">.icon-gantt |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-gongzuoliuchengtu"></span> |
|
<div class="name"> |
|
工作流程图 |
|
</div> |
|
<div class="code-name">.icon-gongzuoliuchengtu |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-chenggongyijiejue"></span> |
|
<div class="name"> |
|
成功已解决- |
|
</div> |
|
<div class="code-name">.icon-chenggongyijiejue |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-home"></span> |
|
<div class="name"> |
|
首页 |
|
</div> |
|
<div class="code-name">.icon-home |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-fuzhi"></span> |
|
<div class="name"> |
|
复制 |
|
</div> |
|
<div class="code-name">.icon-fuzhi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shanchu1"></span> |
|
<div class="name"> |
|
删除 |
|
</div> |
|
<div class="code-name">.icon-shanchu1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-xitongcaozuorizhi"></span> |
|
<div class="name"> |
|
系统操作日志 |
|
</div> |
|
<div class="code-name">.icon-xitongcaozuorizhi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-dingwei"></span> |
|
<div class="name"> |
|
定位 |
|
</div> |
|
<div class="code-name">.icon-dingwei |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yunxingzhong"></span> |
|
<div class="name"> |
|
运行中 |
|
</div> |
|
<div class="code-name">.icon-yunxingzhong |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shezhishedingpeizhichilun"></span> |
|
<div class="name"> |
|
设置 设定 配置 齿轮 |
|
</div> |
|
<div class="code-name">.icon-shezhishedingpeizhichilun |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-zhiyuanshuaxin9"></span> |
|
<div class="name"> |
|
指缘刷新9 |
|
</div> |
|
<div class="code-name">.icon-zhiyuanshuaxin9 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-tishi2"></span> |
|
<div class="name"> |
|
tip |
|
</div> |
|
<div class="code-name">.icon-tishi2 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-one-line-arrow"></span> |
|
<div class="name"> |
|
单箭头直线 |
|
</div> |
|
<div class="code-name">.icon-one-line-arrow |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-quanping"></span> |
|
<div class="name"> |
|
全屏 |
|
</div> |
|
<div class="code-name">.icon-quanping |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-quanping1"></span> |
|
<div class="name"> |
|
全屏 |
|
</div> |
|
<div class="code-name">.icon-quanping1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shanchu"></span> |
|
<div class="name"> |
|
删除 |
|
</div> |
|
<div class="code-name">.icon-shanchu |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yonghu"></span> |
|
<div class="name"> |
|
用户 |
|
</div> |
|
<div class="code-name">.icon-yonghu |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-ai06"></span> |
|
<div class="name"> |
|
暂停 |
|
</div> |
|
<div class="code-name">.icon-ai06 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-ai05"></span> |
|
<div class="name"> |
|
暂停 |
|
</div> |
|
<div class="code-name">.icon-ai05 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yonghu1"></span> |
|
<div class="name"> |
|
用户 |
|
</div> |
|
<div class="code-name">.icon-yonghu1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-wenjianjia"></span> |
|
<div class="name"> |
|
文件夹 |
|
</div> |
|
<div class="code-name">.icon-wenjianjia |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-chenggong"></span> |
|
<div class="name"> |
|
成功 |
|
</div> |
|
<div class="code-name">.icon-chenggong |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-anquan"></span> |
|
<div class="name"> |
|
安全 |
|
</div> |
|
<div class="code-name">.icon-anquan |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shuaxin"></span> |
|
<div class="name"> |
|
刷新 |
|
</div> |
|
<div class="code-name">.icon-shuaxin |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-wendangxiugai"></span> |
|
<div class="name"> |
|
文档修改 |
|
</div> |
|
<div class="code-name">.icon-wendangxiugai |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-download"></span> |
|
<div class="name"> |
|
下载 |
|
</div> |
|
<div class="code-name">.icon-download |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-ITjiankong"></span> |
|
<div class="name"> |
|
IT监控 |
|
</div> |
|
<div class="code-name">.icon-ITjiankong |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-icon-xiugai"></span> |
|
<div class="name"> |
|
修改信息 |
|
</div> |
|
<div class="code-name">.icon-icon-xiugai |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-remove"></span> |
|
<div class="name"> |
|
remove |
|
</div> |
|
<div class="code-name">.icon-remove |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-paibanguanli"></span> |
|
<div class="name"> |
|
排班管理 |
|
</div> |
|
<div class="code-name">.icon-paibanguanli |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shezhi-xue"></span> |
|
<div class="name"> |
|
设置 |
|
</div> |
|
<div class="code-name">.icon-shezhi-xue |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-tianjia-xue"></span> |
|
<div class="name"> |
|
添加 |
|
</div> |
|
<div class="code-name">.icon-tianjia-xue |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-tuichufffpx"></span> |
|
<div class="name"> |
|
退出 #8f8f8f & 14px |
|
</div> |
|
<div class="code-name">.icon-tuichufffpx |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-icon_jinzhi"></span> |
|
<div class="name"> |
|
icon_禁止 |
|
</div> |
|
<div class="code-name">.icon-icon_jinzhi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-jiazaizhong"></span> |
|
<div class="name"> |
|
1116加载中 |
|
</div> |
|
<div class="code-name">.icon-jiazaizhong |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-gou1"></span> |
|
<div class="name"> |
|
勾 |
|
</div> |
|
<div class="code-name">.icon-gou1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shalou"></span> |
|
<div class="name"> |
|
沙漏 |
|
</div> |
|
<div class="code-name">.icon-shalou |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-stop"></span> |
|
<div class="name"> |
|
停止 |
|
</div> |
|
<div class="code-name">.icon-stop |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-timer"></span> |
|
<div class="name"> |
|
定时器 |
|
</div> |
|
<div class="code-name">.icon-timer |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-jiantou-copy"></span> |
|
<div class="name"> |
|
箭头 |
|
</div> |
|
<div class="code-name">.icon-jiantou-copy |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-tingzhi"></span> |
|
<div class="name"> |
|
停止 |
|
</div> |
|
<div class="code-name">.icon-tingzhi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yunsuan-dengyu"></span> |
|
<div class="name"> |
|
运算-等于 |
|
</div> |
|
<div class="code-name">.icon-yunsuan-dengyu |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-bianji"></span> |
|
<div class="name"> |
|
编辑 |
|
</div> |
|
<div class="code-name">.icon-bianji |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-xiangmuguanli"></span> |
|
<div class="name"> |
|
项目管理 |
|
</div> |
|
<div class="code-name">.icon-xiangmuguanli |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yilaiguanxi"></span> |
|
<div class="name"> |
|
依赖关系 |
|
</div> |
|
<div class="code-name">.icon-yilaiguanxi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-erji-xiaxianjilu"></span> |
|
<div class="name"> |
|
二级-下线记录 |
|
</div> |
|
<div class="code-name">.icon-erji-xiaxianjilu |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-daima"></span> |
|
<div class="name"> |
|
代码 |
|
</div> |
|
<div class="code-name">.icon-daima |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-wendangxiazai1"></span> |
|
<div class="name"> |
|
文档下载 |
|
</div> |
|
<div class="code-name">.icon-wendangxiazai1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-lishi"></span> |
|
<div class="name"> |
|
历史 |
|
</div> |
|
<div class="code-name">.icon-lishi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-fangda"></span> |
|
<div class="name"> |
|
放大 |
|
</div> |
|
<div class="code-name">.icon-fangda |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-suoxiao"></span> |
|
<div class="name"> |
|
缩小 |
|
</div> |
|
<div class="code-name">.icon-suoxiao |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-daohang"></span> |
|
<div class="name"> |
|
导航 |
|
</div> |
|
<div class="code-name">.icon-daohang |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shijianguanli"></span> |
|
<div class="name"> |
|
时间管理 |
|
</div> |
|
<div class="code-name">.icon-shijianguanli |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shujuku"></span> |
|
<div class="name"> |
|
数据库 |
|
</div> |
|
<div class="code-name">.icon-shujuku |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-tiaoduzhongxin"></span> |
|
<div class="name"> |
|
调度中心 |
|
</div> |
|
<div class="code-name">.icon-tiaoduzhongxin |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shubiaozhizhen"></span> |
|
<div class="name"> |
|
鼠标指针 |
|
</div> |
|
<div class="code-name">.icon-shubiaozhizhen |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yuandian"></span> |
|
<div class="name"> |
|
圆点 |
|
</div> |
|
<div class="code-name">.icon-yuandian |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon--Tree-Structure"></span> |
|
<div class="name"> |
|
24-Tree-Structure |
|
</div> |
|
<div class="code-name">.icon--Tree-Structure |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-xia"></span> |
|
<div class="name"> |
|
下 |
|
</div> |
|
<div class="code-name">.icon-xia |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-zanting"></span> |
|
<div class="name"> |
|
暂停 |
|
</div> |
|
<div class="code-name">.icon-zanting |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-yonghu3"></span> |
|
<div class="name"> |
|
用户 |
|
</div> |
|
<div class="code-name">.icon-yonghu3 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shanchu2"></span> |
|
<div class="name"> |
|
删除 |
|
</div> |
|
<div class="code-name">.icon-shanchu2 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-guanbi"></span> |
|
<div class="name"> |
|
关 闭 |
|
</div> |
|
<div class="code-name">.icon-guanbi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-cuowuguanbishibai"></span> |
|
<div class="name"> |
|
15.错误、关闭、失败 |
|
</div> |
|
<div class="code-name">.icon-cuowuguanbishibai |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-icon_paging_left"></span> |
|
<div class="name"> |
|
分页向左 |
|
</div> |
|
<div class="code-name">.icon-icon_paging_left |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-icon_paging_left-copy"></span> |
|
<div class="name"> |
|
分页向左 |
|
</div> |
|
<div class="code-name">.icon-icon_paging_left-copy |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-rizhishezhi"></span> |
|
<div class="name"> |
|
日志设置 |
|
</div> |
|
<div class="code-name">.icon-rizhishezhi |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-icon-test"></span> |
|
<div class="name"> |
|
刷新 |
|
</div> |
|
<div class="code-name">.icon-icon-test |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-zanting1"></span> |
|
<div class="name"> |
|
暂停 |
|
</div> |
|
<div class="code-name">.icon-zanting1 |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-shijianfenlei"></span> |
|
<div class="name"> |
|
时间分类 |
|
</div> |
|
<div class="code-name">.icon-shijianfenlei |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-erji-xiaxianjilu-copy"></span> |
|
<div class="name"> |
|
二级-下线记录 |
|
</div> |
|
<div class="code-name">.icon-erji-xiaxianjilu-copy |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-tiaoduzhongxin-copy"></span> |
|
<div class="name"> |
|
调度中心 |
|
</div> |
|
<div class="code-name">.icon-tiaoduzhongxin-copy |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-juxingkaobei"></span> |
|
<div class="name"> |
|
树型 |
|
</div> |
|
<div class="code-name">.icon-juxingkaobei |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-LOGO-"></span> |
|
<div class="name"> |
|
LOGO-2 |
|
</div> |
|
<div class="code-name">.icon-LOGO- |
|
</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<span class="icon iconfont icon-jiantou-copy-copy"></span> |
|
<div class="name"> |
|
箭头 |
|
</div> |
|
<div class="code-name">.icon-jiantou-copy-copy |
|
</div> |
|
</li> |
|
|
|
</ul> |
|
<div class="article markdown"> |
|
<h2 id="font-class-">font-class 引用</h2> |
|
<hr> |
|
|
|
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> |
|
<p>与 Unicode 使用方式相比,具有如下特点:</p> |
|
<ul> |
|
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> |
|
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> |
|
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> |
|
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
|
</ul> |
|
<p>使用步骤如下:</p> |
|
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> |
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
|
</code></pre> |
|
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
|
</code></pre> |
|
<blockquote> |
|
<p>" |
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
|
</blockquote> |
|
</div> |
|
</div> |
|
<div class="content symbol"> |
|
<ul class="icon_lists dib-box"> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-bianjixiugai"></use> |
|
</svg> |
|
<div class="name">编辑修改</div> |
|
<div class="code-name">#icon-bianjixiugai</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shibai"></use> |
|
</svg> |
|
<div class="name">失败</div> |
|
<div class="code-name">#icon-shibai</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-dengdai"></use> |
|
</svg> |
|
<div class="name">等待</div> |
|
<div class="code-name">#icon-dengdai</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shuaxin1"></use> |
|
</svg> |
|
<div class="name">刷新</div> |
|
<div class="code-name">#icon-shuaxin1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-qidong"></use> |
|
</svg> |
|
<div class="name">启动</div> |
|
<div class="code-name">#icon-qidong</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-gantt"></use> |
|
</svg> |
|
<div class="name">gantt</div> |
|
<div class="code-name">#icon-gantt</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-gongzuoliuchengtu"></use> |
|
</svg> |
|
<div class="name">工作流程图</div> |
|
<div class="code-name">#icon-gongzuoliuchengtu</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-chenggongyijiejue"></use> |
|
</svg> |
|
<div class="name">成功已解决-</div> |
|
<div class="code-name">#icon-chenggongyijiejue</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-home"></use> |
|
</svg> |
|
<div class="name">首页</div> |
|
<div class="code-name">#icon-home</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-fuzhi"></use> |
|
</svg> |
|
<div class="name">复制</div> |
|
<div class="code-name">#icon-fuzhi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shanchu1"></use> |
|
</svg> |
|
<div class="name">删除</div> |
|
<div class="code-name">#icon-shanchu1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-xitongcaozuorizhi"></use> |
|
</svg> |
|
<div class="name">系统操作日志</div> |
|
<div class="code-name">#icon-xitongcaozuorizhi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-dingwei"></use> |
|
</svg> |
|
<div class="name">定位</div> |
|
<div class="code-name">#icon-dingwei</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yunxingzhong"></use> |
|
</svg> |
|
<div class="name">运行中</div> |
|
<div class="code-name">#icon-yunxingzhong</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shezhishedingpeizhichilun"></use> |
|
</svg> |
|
<div class="name">设置 设定 配置 齿轮</div> |
|
<div class="code-name">#icon-shezhishedingpeizhichilun</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-zhiyuanshuaxin9"></use> |
|
</svg> |
|
<div class="name">指缘刷新9</div> |
|
<div class="code-name">#icon-zhiyuanshuaxin9</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-tishi2"></use> |
|
</svg> |
|
<div class="name">tip</div> |
|
<div class="code-name">#icon-tishi2</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-one-line-arrow"></use> |
|
</svg> |
|
<div class="name">单箭头直线</div> |
|
<div class="code-name">#icon-one-line-arrow</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-quanping"></use> |
|
</svg> |
|
<div class="name">全屏</div> |
|
<div class="code-name">#icon-quanping</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-quanping1"></use> |
|
</svg> |
|
<div class="name">全屏</div> |
|
<div class="code-name">#icon-quanping1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shanchu"></use> |
|
</svg> |
|
<div class="name">删除</div> |
|
<div class="code-name">#icon-shanchu</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yonghu"></use> |
|
</svg> |
|
<div class="name">用户</div> |
|
<div class="code-name">#icon-yonghu</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-ai06"></use> |
|
</svg> |
|
<div class="name">暂停</div> |
|
<div class="code-name">#icon-ai06</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-ai05"></use> |
|
</svg> |
|
<div class="name">暂停</div> |
|
<div class="code-name">#icon-ai05</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yonghu1"></use> |
|
</svg> |
|
<div class="name">用户</div> |
|
<div class="code-name">#icon-yonghu1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-wenjianjia"></use> |
|
</svg> |
|
<div class="name">文件夹</div> |
|
<div class="code-name">#icon-wenjianjia</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-chenggong"></use> |
|
</svg> |
|
<div class="name">成功</div> |
|
<div class="code-name">#icon-chenggong</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-anquan"></use> |
|
</svg> |
|
<div class="name">安全</div> |
|
<div class="code-name">#icon-anquan</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shuaxin"></use> |
|
</svg> |
|
<div class="name">刷新</div> |
|
<div class="code-name">#icon-shuaxin</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-wendangxiugai"></use> |
|
</svg> |
|
<div class="name">文档修改</div> |
|
<div class="code-name">#icon-wendangxiugai</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-download"></use> |
|
</svg> |
|
<div class="name">下载</div> |
|
<div class="code-name">#icon-download</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-ITjiankong"></use> |
|
</svg> |
|
<div class="name">IT监控</div> |
|
<div class="code-name">#icon-ITjiankong</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-icon-xiugai"></use> |
|
</svg> |
|
<div class="name">修改信息</div> |
|
<div class="code-name">#icon-icon-xiugai</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-remove"></use> |
|
</svg> |
|
<div class="name">remove</div> |
|
<div class="code-name">#icon-remove</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-paibanguanli"></use> |
|
</svg> |
|
<div class="name">排班管理</div> |
|
<div class="code-name">#icon-paibanguanli</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shezhi-xue"></use> |
|
</svg> |
|
<div class="name">设置</div> |
|
<div class="code-name">#icon-shezhi-xue</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-tianjia-xue"></use> |
|
</svg> |
|
<div class="name">添加</div> |
|
<div class="code-name">#icon-tianjia-xue</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-tuichufffpx"></use> |
|
</svg> |
|
<div class="name">退出 #8f8f8f & 14px</div> |
|
<div class="code-name">#icon-tuichufffpx</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-icon_jinzhi"></use> |
|
</svg> |
|
<div class="name">icon_禁止</div> |
|
<div class="code-name">#icon-icon_jinzhi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-jiazaizhong"></use> |
|
</svg> |
|
<div class="name">1116加载中</div> |
|
<div class="code-name">#icon-jiazaizhong</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-gou1"></use> |
|
</svg> |
|
<div class="name">勾</div> |
|
<div class="code-name">#icon-gou1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shalou"></use> |
|
</svg> |
|
<div class="name">沙漏</div> |
|
<div class="code-name">#icon-shalou</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-stop"></use> |
|
</svg> |
|
<div class="name">停止</div> |
|
<div class="code-name">#icon-stop</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-timer"></use> |
|
</svg> |
|
<div class="name">定时器</div> |
|
<div class="code-name">#icon-timer</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-jiantou-copy"></use> |
|
</svg> |
|
<div class="name">箭头</div> |
|
<div class="code-name">#icon-jiantou-copy</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-tingzhi"></use> |
|
</svg> |
|
<div class="name">停止</div> |
|
<div class="code-name">#icon-tingzhi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yunsuan-dengyu"></use> |
|
</svg> |
|
<div class="name">运算-等于</div> |
|
<div class="code-name">#icon-yunsuan-dengyu</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-bianji"></use> |
|
</svg> |
|
<div class="name">编辑</div> |
|
<div class="code-name">#icon-bianji</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-xiangmuguanli"></use> |
|
</svg> |
|
<div class="name">项目管理</div> |
|
<div class="code-name">#icon-xiangmuguanli</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yilaiguanxi"></use> |
|
</svg> |
|
<div class="name">依赖关系</div> |
|
<div class="code-name">#icon-yilaiguanxi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-erji-xiaxianjilu"></use> |
|
</svg> |
|
<div class="name">二级-下线记录</div> |
|
<div class="code-name">#icon-erji-xiaxianjilu</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-daima"></use> |
|
</svg> |
|
<div class="name">代码</div> |
|
<div class="code-name">#icon-daima</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-wendangxiazai1"></use> |
|
</svg> |
|
<div class="name">文档下载</div> |
|
<div class="code-name">#icon-wendangxiazai1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-lishi"></use> |
|
</svg> |
|
<div class="name">历史</div> |
|
<div class="code-name">#icon-lishi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-fangda"></use> |
|
</svg> |
|
<div class="name">放大</div> |
|
<div class="code-name">#icon-fangda</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-suoxiao"></use> |
|
</svg> |
|
<div class="name">缩小</div> |
|
<div class="code-name">#icon-suoxiao</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-daohang"></use> |
|
</svg> |
|
<div class="name">导航</div> |
|
<div class="code-name">#icon-daohang</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shijianguanli"></use> |
|
</svg> |
|
<div class="name">时间管理</div> |
|
<div class="code-name">#icon-shijianguanli</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shujuku"></use> |
|
</svg> |
|
<div class="name">数据库</div> |
|
<div class="code-name">#icon-shujuku</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-tiaoduzhongxin"></use> |
|
</svg> |
|
<div class="name">调度中心</div> |
|
<div class="code-name">#icon-tiaoduzhongxin</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shubiaozhizhen"></use> |
|
</svg> |
|
<div class="name">鼠标指针</div> |
|
<div class="code-name">#icon-shubiaozhizhen</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yuandian"></use> |
|
</svg> |
|
<div class="name">圆点</div> |
|
<div class="code-name">#icon-yuandian</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon--Tree-Structure"></use> |
|
</svg> |
|
<div class="name">24-Tree-Structure</div> |
|
<div class="code-name">#icon--Tree-Structure</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-xia"></use> |
|
</svg> |
|
<div class="name">下</div> |
|
<div class="code-name">#icon-xia</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-zanting"></use> |
|
</svg> |
|
<div class="name">暂停</div> |
|
<div class="code-name">#icon-zanting</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-yonghu3"></use> |
|
</svg> |
|
<div class="name">用户</div> |
|
<div class="code-name">#icon-yonghu3</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shanchu2"></use> |
|
</svg> |
|
<div class="name">删除</div> |
|
<div class="code-name">#icon-shanchu2</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-guanbi"></use> |
|
</svg> |
|
<div class="name">关 闭</div> |
|
<div class="code-name">#icon-guanbi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-cuowuguanbishibai"></use> |
|
</svg> |
|
<div class="name">15.错误、关闭、失败</div> |
|
<div class="code-name">#icon-cuowuguanbishibai</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-icon_paging_left"></use> |
|
</svg> |
|
<div class="name">分页向左</div> |
|
<div class="code-name">#icon-icon_paging_left</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-icon_paging_left-copy"></use> |
|
</svg> |
|
<div class="name">分页向左</div> |
|
<div class="code-name">#icon-icon_paging_left-copy</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-rizhishezhi"></use> |
|
</svg> |
|
<div class="name">日志设置</div> |
|
<div class="code-name">#icon-rizhishezhi</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-icon-test"></use> |
|
</svg> |
|
<div class="name">刷新</div> |
|
<div class="code-name">#icon-icon-test</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-zanting1"></use> |
|
</svg> |
|
<div class="name">暂停</div> |
|
<div class="code-name">#icon-zanting1</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-shijianfenlei"></use> |
|
</svg> |
|
<div class="name">时间分类</div> |
|
<div class="code-name">#icon-shijianfenlei</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-erji-xiaxianjilu-copy"></use> |
|
</svg> |
|
<div class="name">二级-下线记录</div> |
|
<div class="code-name">#icon-erji-xiaxianjilu-copy</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-tiaoduzhongxin-copy"></use> |
|
</svg> |
|
<div class="name">调度中心</div> |
|
<div class="code-name">#icon-tiaoduzhongxin-copy</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-juxingkaobei"></use> |
|
</svg> |
|
<div class="name">树型</div> |
|
<div class="code-name">#icon-juxingkaobei</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-LOGO-"></use> |
|
</svg> |
|
<div class="name">LOGO-2</div> |
|
<div class="code-name">#icon-LOGO-</div> |
|
</li> |
|
|
|
<li class="dib"> |
|
<svg class="icon svg-icon" aria-hidden="true"> |
|
<use xlink:href="#icon-jiantou-copy-copy"></use> |
|
</svg> |
|
<div class="name">箭头</div> |
|
<div class="code-name">#icon-jiantou-copy-copy</div> |
|
</li> |
|
|
|
</ul> |
|
<div class="article markdown"> |
|
<h2 id="symbol-">Symbol 引用</h2> |
|
<hr> |
|
|
|
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
|
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> |
|
<ul> |
|
<li>支持多色图标了,不再受单色限制。</li> |
|
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
|
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> |
|
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> |
|
</ul> |
|
<p>使用步骤如下:</p> |
|
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> |
|
<pre><code class="language-html"><script src="./iconfont.js"></script> |
|
</code></pre> |
|
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> |
|
<pre><code class="language-html"><style> |
|
.icon { |
|
width: 1em; |
|
height: 1em; |
|
vertical-align: -0.15em; |
|
fill: currentColor; |
|
overflow: hidden; |
|
} |
|
</style> |
|
</code></pre> |
|
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
|
<use xlink:href="#icon-xxx"></use> |
|
</svg> |
|
</code></pre> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
<script> |
|
$(document).ready(function () { |
|
$('.tab-container .content:first').show() |
|
|
|
$('#tabs li').click(function (e) { |
|
var tabContent = $('.tab-container .content') |
|
var index = $(this).index() |
|
|
|
if ($(this).hasClass('active')) { |
|
return |
|
} else { |
|
$('#tabs li').removeClass('active') |
|
$(this).addClass('active') |
|
|
|
tabContent.hide().eq(index).fadeIn() |
|
} |
|
}) |
|
}) |
|
</script> |
|
</body> |
|
</html>
|
|
|