/dashboard/src/assets/icon/demo_index.html
https://github.com/KubeOperator/kubeapps-plus · HTML · 3068 lines · 2676 code · 390 blank · 2 comment · 0 complexity · 334e586585ca087c8b027ce7d3e0c63b MD5 · raw file
- <!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=1481498" 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">&#xe600;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">电脑</div>
- <div class="code-name">&#xe601;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">主页</div>
- <div class="code-name">&#xe610;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">人员</div>
- <div class="code-name">&#xe63c;</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">主页</div>
- <div class="code-name">&#xe640;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">现实演示</div>
- <div class="code-name">&#xe705;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">plus </div>
- <div class="code-name">&#xea35;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">log-out</div>
- <div class="code-name">&#xe652;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">日历</div>
- <div class="code-name">&#xe627;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">plus</div>
- <div class="code-name">&#xeb9b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">幻灯演示</div>
- <div class="code-name">&#xe6b5;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">主页</div>
- <div class="code-name">&#xe645;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">主页</div>
- <div class="code-name">&#xe6d2;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">phone</div>
- <div class="code-name">&#xe643;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索</div>
- <div class="code-name">&#xe60e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">客户支持服务</div>
- <div class="code-name">&#xe663;</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">好房拓 4.0.0 报备客户</div>
- <div class="code-name">&#xe6b6;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索</div>
- <div class="code-name">&#xe608;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">生产报备</div>
- <div class="code-name">&#xe64b;</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">&#xe614;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">设置</div>
- <div class="code-name">&#xe641;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">logout</div>
- <div class="code-name">&#xe654;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe7b1;</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">&#xe653;</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">&#xe617;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">面板编辑</div>
- <div class="code-name">&#xe69d;</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">&#xe611;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">日历</div>
- <div class="code-name">&#xe642;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">电脑</div>
- <div class="code-name">&#xe6f2;</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">phone</div>
- <div class="code-name">&#xe644;</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">考勤报备</div>
- <div class="code-name">&#xe64c;</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">&#xe688;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">时钟</div>
- <div class="code-name">&#xe618;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">面板开通</div>
- <div class="code-name">&#xe619;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">GitHub</div>
- <div class="code-name">&#xea0a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">锁头</div>
- <div class="code-name">&#xe650;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">面板</div>
- <div class="code-name">&#xe62f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">日历</div>
- <div class="code-name">&#xe7a4;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">phone</div>
- <div class="code-name">&#xe646;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">交互演示动画</div>
- <div class="code-name">&#xe648;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe67b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">概览</div>
- <div class="code-name">&#xe715;</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">&#xe669;</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">&#xe613;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe657;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">时钟</div>
- <div class="code-name">&#xe656;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">时钟</div>
- <div class="code-name">&#xe6b1;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">服务器</div>
- <div class="code-name">&#xe726;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">设置 copy 2</div>
- <div class="code-name">&#xe6b0;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">phone</div>
- <div class="code-name">&#xe725;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">日历</div>
- <div class="code-name">&#xe8ca;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">plus</div>
- <div class="code-name">&#xf081;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">github</div>
- <div class="code-name">&#xf1b4;</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">购物车-23</div>
- <div class="code-name">&#xe604;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">购物车-23</div>
- <div class="code-name">&#xe605;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索</div>
- <div class="code-name">&#xe709;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">演示汇报</div>
- <div class="code-name">&#xe649;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">phone</div>
- <div class="code-name">&#xe647;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xeb9c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe6cb;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">人员 (1)</div>
- <div class="code-name">&#xe60f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">服务支持</div>
- <div class="code-name">&#xe64d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">人员</div>
- <div class="code-name">&#xe60c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索--1</div>
- <div class="code-name">&#xe616;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">服务器</div>
- <div class="code-name">&#xe623;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">english</div>
- <div class="code-name">&#xe655;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">Version Changed</div>
- <div class="code-name">&#xe658;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索</div>
- <div class="code-name">&#xe65c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">支持</div>
- <div class="code-name">&#xe64e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">面板表格</div>
- <div class="code-name">&#xe8ae;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">log-out</div>
- <div class="code-name">&#xe6be;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">设 置</div>
- <div class="code-name">&#xe606;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe724;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">任务 (1)</div>
- <div class="code-name">&#xe607;</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">&#xe64a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">tags</div>
- <div class="code-name">&#xe61b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_horn</div>
- <div class="code-name">&#xe61c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_dmail</div>
- <div class="code-name">&#xe61d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_message</div>
- <div class="code-name">&#xe61e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_im_more</div>
- <div class="code-name">&#xe61f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_subordinate</div>
- <div class="code-name">&#xe620;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">Field-number</div>
- <div class="code-name">&#xe621;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">delete</div>
- <div class="code-name">&#xe622;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_English</div>
- <div class="code-name">&#xe660;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">tips</div>
- <div class="code-name">&#xe624;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">segi-icon-tips</div>
- <div class="code-name">&#xe625;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">tips (1)</div>
- <div class="code-name">&#xe626;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">TIPS (2)</div>
- <div class="code-name">&#xe628;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">exchange</div>
- <div class="code-name">&#xe629;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">exchange (1)</div>
- <div class="code-name">&#xe62a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">exchange (2)</div>
- <div class="code-name">&#xe62b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">exchange-cny-line</div>
- <div class="code-name">&#xe62c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">excel</div>
- <div class="code-name">&#xe62d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">Excel 办公软件 表格</div>
- <div class="code-name">&#xe62e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">word</div>
- <div class="code-name">&#xe632;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">word (1)</div>
- <div class="code-name">&#xe633;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">图表-表格</div>
- <div class="code-name">&#xe634;</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">&#xe636;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">图表 (1)</div>
- <div class="code-name">&#xe637;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">图表 (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">&#xe63a;</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">&#xe63d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">组织管理</div>
- <div class="code-name">&#xe63e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">组织群体</div>
- <div class="code-name">&#xe63f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">支持中心</div>
- <div class="code-name">&#xe64f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">ICP备案服务</div>
- <div class="code-name">&#xe7d9;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe690;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version</div>
- <div class="code-name">&#xe6d7;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">version icon</div>
- <div class="code-name">&#xe659;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">logout-1</div>
- <div class="code-name">&#xe85f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">k8s-namespace</div>
- <div class="code-name">&#xe7bb;</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 iconshezhi"></span>
- <div class="name">
- 设置
- </div>
- <div class="code-name">.iconshezhi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icondiannao"></span>
- <div class="name">
- 电脑
- </div>
- <div class="code-name">.icondiannao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzhuye"></span>
- <div class="name">
- 主页
- </div>
- <div class="code-name">.iconzhuye
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconperson"></span>
- <div class="name">
- 人员
- </div>
- <div class="code-name">.iconperson
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icondiannao1"></span>
- <div class="name">
- 电脑
- </div>
- <div class="code-name">.icondiannao1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzhuye1"></span>
- <div class="name">
- 主页
- </div>
- <div class="code-name">.iconzhuye1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconxianshiyanshi"></span>
- <div class="name">
- 现实演示
- </div>
- <div class="code-name">.iconxianshiyanshi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconplus"></span>
- <div class="name">
- plus
- </div>
- <div class="code-name">.iconplus
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconlogout"></span>
- <div class="name">
- log-out
- </div>
- <div class="code-name">.iconlogout
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrili"></span>
- <div class="name">
- 日历
- </div>
- <div class="code-name">.iconrili
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconplus1"></span>
- <div class="name">
- plus
- </div>
- <div class="code-name">.iconplus1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon28"></span>
- <div class="name">
- 幻灯演示
- </div>
- <div class="code-name">.icon28
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzhuye2"></span>
- <div class="name">
- 主页
- </div>
- <div class="code-name">.iconzhuye2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzhuye3"></span>
- <div class="name">
- 主页
- </div>
- <div class="code-name">.iconzhuye3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconphone"></span>
- <div class="name">
- phone
- </div>
- <div class="code-name">.iconphone
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsousuo"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsousuo
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon"></span>
- <div class="name">
- 客户支持服务
- </div>
- <div class="code-name">.iconicon
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icondiannao2"></span>
- <div class="name">
- 电脑
- </div>
- <div class="code-name">.icondiannao2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconhaofangtuo400baobeikehu"></span>
- <div class="name">
- 好房拓 4.0.0 报备客户
- </div>
- <div class="code-name">.iconhaofangtuo400baobeikehu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsousuo-copy"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsousuo-copy
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshengchanbaobei"></span>
- <div class="name">
- 生产报备
- </div>
- <div class="code-name">.iconshengchanbaobei
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrili1"></span>
- <div class="name">
- 日历
- </div>
- <div class="code-name">.iconrili1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsearch"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsearch
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshezhi1"></span>
- <div class="name">
- 设置
- </div>
- <div class="code-name">.iconshezhi1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconlogout1"></span>
- <div class="name">
- logout
- </div>
- <div class="code-name">.iconlogout1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconfuwuqi"></span>
- <div class="name">
- 服务器
- </div>
- <div class="code-name">.iconfuwuqi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconoverview"></span>
- <div class="name">
- 概览
- </div>
- <div class="code-name">.iconoverview
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icondashboard"></span>
- <div class="name">
- 电脑
- </div>
- <div class="code-name">.icondashboard
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconmianbanbianji"></span>
- <div class="name">
- 面板编辑
- </div>
- <div class="code-name">.iconmianbanbianji
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconmianbanbianji1"></span>
- <div class="name">
- 面板编辑
- </div>
- <div class="code-name">.iconmianbanbianji1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconfuwuqi1"></span>
- <div class="name">
- 服务器
- </div>
- <div class="code-name">.iconfuwuqi1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsousuo1"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsousuo1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrili2"></span>
- <div class="name">
- 日历
- </div>
- <div class="code-name">.iconrili2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconcomputer"></span>
- <div class="name">
- 电脑
- </div>
- <div class="code-name">.iconcomputer
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconfuwuqi2"></span>
- <div class="name">
- 服务器
- </div>
- <div class="code-name">.iconfuwuqi2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon-test"></span>
- <div class="name">
- phone
- </div>
- <div class="code-name">.iconicon-test
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconfuwuqi3"></span>
- <div class="name">
- 服务器
- </div>
- <div class="code-name">.iconfuwuqi3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconkaoqinbaobei"></span>
- <div class="name">
- 考勤报备
- </div>
- <div class="code-name">.iconkaoqinbaobei
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconcomputer1"></span>
- <div class="name">
- 计算机
- </div>
- <div class="code-name">.iconcomputer1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconyewuyuanyeji-"></span>
- <div class="name">
- 人员
- </div>
- <div class="code-name">.iconyewuyuanyeji-
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshizhong"></span>
- <div class="name">
- 时钟
- </div>
- <div class="code-name">.iconshizhong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconmianbankaitong"></span>
- <div class="name">
- 面板开通
- </div>
- <div class="code-name">.iconmianbankaitong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconGitHub"></span>
- <div class="name">
- GitHub
- </div>
- <div class="code-name">.iconGitHub
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon-"></span>
- <div class="name">
- 锁头
- </div>
- <div class="code-name">.iconicon-
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconmianban"></span>
- <div class="name">
- 面板
- </div>
- <div class="code-name">.iconmianban
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrili3"></span>
- <div class="name">
- 日历
- </div>
- <div class="code-name">.iconrili3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconphone1"></span>
- <div class="name">
- phone
- </div>
- <div class="code-name">.iconphone1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconjiaohuyanshidonghua"></span>
- <div class="name">
- 交互演示动画
- </div>
- <div class="code-name">.iconjiaohuyanshidonghua
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion1"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icongailan"></span>
- <div class="name">
- 概览
- </div>
- <div class="code-name">.icongailan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsousuo2"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsousuo2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshizhong1"></span>
- <div class="name">
- 时钟
- </div>
- <div class="code-name">.iconshizhong1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshizhong2"></span>
- <div class="name">
- 时钟
- </div>
- <div class="code-name">.iconshizhong2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrenyuan"></span>
- <div class="name">
- 人员
- </div>
- <div class="code-name">.iconrenyuan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion2"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshizhong3"></span>
- <div class="name">
- 时钟
- </div>
- <div class="code-name">.iconshizhong3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshizhong4"></span>
- <div class="name">
- 时钟
- </div>
- <div class="code-name">.iconshizhong4
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconfuwuqi4"></span>
- <div class="name">
- 服务器
- </div>
- <div class="code-name">.iconfuwuqi4
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshezhicopy"></span>
- <div class="name">
- 设置 copy 2
- </div>
- <div class="code-name">.iconshezhicopy
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconphone2"></span>
- <div class="name">
- phone
- </div>
- <div class="code-name">.iconphone2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrili4"></span>
- <div class="name">
- 日历
- </div>
- <div class="code-name">.iconrili4
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconplus2"></span>
- <div class="name">
- plus
- </div>
- <div class="code-name">.iconplus2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icongithub"></span>
- <div class="name">
- github
- </div>
- <div class="code-name">.icongithub
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconwendang"></span>
- <div class="name">
- 文档
- </div>
- <div class="code-name">.iconwendang
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconqicheqianlian-1-copy"></span>
- <div class="name">
- 购物车-23
- </div>
- <div class="code-name">.iconqicheqianlian-1-copy
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconqicheqianlian-1-copy1"></span>
- <div class="name">
- 购物车-23
- </div>
- <div class="code-name">.iconqicheqianlian-1-copy1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsousuo3"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsousuo3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconyanshihuiyi"></span>
- <div class="name">
- 演示汇报
- </div>
- <div class="code-name">.iconyanshihuiyi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconphone3"></span>
- <div class="name">
- phone
- </div>
- <div class="code-name">.iconphone3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion3"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion4"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion4
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrenyuan1"></span>
- <div class="name">
- 人员 (1)
- </div>
- <div class="code-name">.iconrenyuan1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconjishuzhichizhichizhinengzhinengfuwufuwuke"></span>
- <div class="name">
- 服务支持
- </div>
- <div class="code-name">.iconjishuzhichizhichizhinengzhinengfuwufuwuke
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrenyuan2"></span>
- <div class="name">
- 人员
- </div>
- <div class="code-name">.iconrenyuan2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsoushuo"></span>
- <div class="name">
- 搜索--1
- </div>
- <div class="code-name">.iconsoushuo
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconfuwuqi5"></span>
- <div class="name">
- 服务器
- </div>
- <div class="code-name">.iconfuwuqi5
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconenglish"></span>
- <div class="name">
- english
- </div>
- <div class="code-name">.iconenglish
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconiconmanagement-"></span>
- <div class="name">
- Version Changed
- </div>
- <div class="code-name">.iconiconmanagement-
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsousuo4"></span>
- <div class="name">
- 搜索
- </div>
- <div class="code-name">.iconsousuo4
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconSUPPORT"></span>
- <div class="name">
- 支持
- </div>
- <div class="code-name">.iconSUPPORT
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconmianbanbiaoge"></span>
- <div class="name">
- 面板表格
- </div>
- <div class="code-name">.iconmianbanbiaoge
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconlog-out"></span>
- <div class="name">
- log-out
- </div>
- <div class="code-name">.iconlog-out
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshezhi3"></span>
- <div class="name">
- 设 置
- </div>
- <div class="code-name">.iconshezhi3
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion5"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion5
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconrenwu"></span>
- <div class="name">
- 任务 (1)
- </div>
- <div class="code-name">.iconrenwu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshizhong5"></span>
- <div class="name">
- 时钟
- </div>
- <div class="code-name">.iconshizhong5
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconshow"></span>
- <div class="name">
- 演示
- </div>
- <div class="code-name">.iconshow
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontags"></span>
- <div class="name">
- tags
- </div>
- <div class="code-name">.icontags
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon_horn"></span>
- <div class="name">
- icon_horn
- </div>
- <div class="code-name">.iconicon_horn
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon_dmail"></span>
- <div class="name">
- icon_dmail
- </div>
- <div class="code-name">.iconicon_dmail
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon_message"></span>
- <div class="name">
- icon_message
- </div>
- <div class="code-name">.iconicon_message
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon_im_more"></span>
- <div class="name">
- icon_im_more
- </div>
- <div class="code-name">.iconicon_im_more
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon_subordinate"></span>
- <div class="name">
- icon_subordinate
- </div>
- <div class="code-name">.iconicon_subordinate
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconField-number"></span>
- <div class="name">
- Field-number
- </div>
- <div class="code-name">.iconField-number
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icondelete"></span>
- <div class="name">
- delete
- </div>
- <div class="code-name">.icondelete
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconicon_English"></span>
- <div class="name">
- icon_English
- </div>
- <div class="code-name">.iconicon_English
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontips"></span>
- <div class="name">
- tips
- </div>
- <div class="code-name">.icontips
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconsegi-icon-tips"></span>
- <div class="name">
- segi-icon-tips
- </div>
- <div class="code-name">.iconsegi-icon-tips
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontips1"></span>
- <div class="name">
- tips (1)
- </div>
- <div class="code-name">.icontips1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconTIPS"></span>
- <div class="name">
- TIPS (2)
- </div>
- <div class="code-name">.iconTIPS
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconexchange"></span>
- <div class="name">
- exchange
- </div>
- <div class="code-name">.iconexchange
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconexchange1"></span>
- <div class="name">
- exchange (1)
- </div>
- <div class="code-name">.iconexchange1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconexchange2"></span>
- <div class="name">
- exchange (2)
- </div>
- <div class="code-name">.iconexchange2
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconexchange-cny-line"></span>
- <div class="name">
- exchange-cny-line
- </div>
- <div class="code-name">.iconexchange-cny-line
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconexcel"></span>
- <div class="name">
- excel
- </div>
- <div class="code-name">.iconexcel
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconExcelbangongruanjianbiaoge"></span>
- <div class="name">
- Excel 办公软件 表格
- </div>
- <div class="code-name">.iconExcelbangongruanjianbiaoge
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconword"></span>
- <div class="name">
- word
- </div>
- <div class="code-name">.iconword
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconword1"></span>
- <div class="name">
- word (1)
- </div>
- <div class="code-name">.iconword1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiao-biaoge"></span>
- <div class="name">
- 图表-表格
- </div>
- <div class="code-name">.icontubiao-biaoge
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiaoxiajiangqushi"></span>
- <div class="name">
- 图表 下降趋势
- </div>
- <div class="code-name">.icontubiaoxiajiangqushi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiaoduoweizhuzhuangtu"></span>
- <div class="name">
- 图表 多维柱状图
- </div>
- <div class="code-name">.icontubiaoduoweizhuzhuangtu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiao"></span>
- <div class="name">
- 图表 (1)
- </div>
- <div class="code-name">.icontubiao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiao1"></span>
- <div class="name">
- 图表 (2)
- </div>
- <div class="code-name">.icontubiao1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiaozoushitu"></span>
- <div class="name">
- 图表 走势图
- </div>
- <div class="code-name">.icontubiaozoushitu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icontubiao-hanshu"></span>
- <div class="name">
- 图表-函数
- </div>
- <div class="code-name">.icontubiao-hanshu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzuzhi"></span>
- <div class="name">
- 组织
- </div>
- <div class="code-name">.iconzuzhi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzuzhiguanli"></span>
- <div class="name">
- 组织管理
- </div>
- <div class="code-name">.iconzuzhiguanli
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzuzhiqunti"></span>
- <div class="name">
- 组织群体
- </div>
- <div class="code-name">.iconzuzhiqunti
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconzhichizhongxin"></span>
- <div class="name">
- 支持中心
- </div>
- <div class="code-name">.iconzhichizhongxin
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconICPbeianfuwu"></span>
- <div class="name">
- ICP备案服务
- </div>
- <div class="code-name">.iconICPbeianfuwu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion6"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion6
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversion7"></span>
- <div class="name">
- version
- </div>
- <div class="code-name">.iconversion7
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconversionicon"></span>
- <div class="name">
- version icon
- </div>
- <div class="code-name">.iconversionicon
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconlogout-"></span>
- <div class="name">
- logout-1
- </div>
- <div class="code-name">.iconlogout-
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont iconks-namespace"></span>
- <div class="name">
- k8s-namespace
- </div>
- <div class="code-name">.iconks-namespace
- </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 iconxxx"></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="#iconshezhi"></use>
- </svg>
- <div class="name">设置</div>
- <div class="code-name">#iconshezhi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icondiannao"></use>
- </svg>
- <div class="name">电脑</div>
- <div class="code-name">#icondiannao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzhuye"></use>
- </svg>
- <div class="name">主页</div>
- <div class="code-name">#iconzhuye</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconperson"></use>
- </svg>
- <div class="name">人员</div>
- <div class="code-name">#iconperson</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icondiannao1"></use>
- </svg>
- <div class="name">电脑</div>
- <div class="code-name">#icondiannao1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzhuye1"></use>
- </svg>
- <div class="name">主页</div>
- <div class="code-name">#iconzhuye1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconxianshiyanshi"></use>
- </svg>
- <div class="name">现实演示</div>
- <div class="code-name">#iconxianshiyanshi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconplus"></use>
- </svg>
- <div class="name">plus </div>
- <div class="code-name">#iconplus</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconlogout"></use>
- </svg>
- <div class="name">log-out</div>
- <div class="code-name">#iconlogout</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrili"></use>
- </svg>
- <div class="name">日历</div>
- <div class="code-name">#iconrili</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconplus1"></use>
- </svg>
- <div class="name">plus</div>
- <div class="code-name">#iconplus1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon28"></use>
- </svg>
- <div class="name">幻灯演示</div>
- <div class="code-name">#icon28</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzhuye2"></use>
- </svg>
- <div class="name">主页</div>
- <div class="code-name">#iconzhuye2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzhuye3"></use>
- </svg>
- <div class="name">主页</div>
- <div class="code-name">#iconzhuye3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconphone"></use>
- </svg>
- <div class="name">phone</div>
- <div class="code-name">#iconphone</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsousuo"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsousuo</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon"></use>
- </svg>
- <div class="name">客户支持服务</div>
- <div class="code-name">#iconicon</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icondiannao2"></use>
- </svg>
- <div class="name">电脑</div>
- <div class="code-name">#icondiannao2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconhaofangtuo400baobeikehu"></use>
- </svg>
- <div class="name">好房拓 4.0.0 报备客户</div>
- <div class="code-name">#iconhaofangtuo400baobeikehu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsousuo-copy"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsousuo-copy</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshengchanbaobei"></use>
- </svg>
- <div class="name">生产报备</div>
- <div class="code-name">#iconshengchanbaobei</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrili1"></use>
- </svg>
- <div class="name">日历</div>
- <div class="code-name">#iconrili1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsearch"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsearch</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshezhi1"></use>
- </svg>
- <div class="name">设置</div>
- <div class="code-name">#iconshezhi1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconlogout1"></use>
- </svg>
- <div class="name">logout</div>
- <div class="code-name">#iconlogout1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconfuwuqi"></use>
- </svg>
- <div class="name">服务器</div>
- <div class="code-name">#iconfuwuqi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconoverview"></use>
- </svg>
- <div class="name">概览</div>
- <div class="code-name">#iconoverview</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icondashboard"></use>
- </svg>
- <div class="name">电脑</div>
- <div class="code-name">#icondashboard</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconmianbanbianji"></use>
- </svg>
- <div class="name">面板编辑</div>
- <div class="code-name">#iconmianbanbianji</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconmianbanbianji1"></use>
- </svg>
- <div class="name">面板编辑</div>
- <div class="code-name">#iconmianbanbianji1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconfuwuqi1"></use>
- </svg>
- <div class="name">服务器</div>
- <div class="code-name">#iconfuwuqi1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsousuo1"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsousuo1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrili2"></use>
- </svg>
- <div class="name">日历</div>
- <div class="code-name">#iconrili2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconcomputer"></use>
- </svg>
- <div class="name">电脑</div>
- <div class="code-name">#iconcomputer</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconfuwuqi2"></use>
- </svg>
- <div class="name">服务器</div>
- <div class="code-name">#iconfuwuqi2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon-test"></use>
- </svg>
- <div class="name">phone</div>
- <div class="code-name">#iconicon-test</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconfuwuqi3"></use>
- </svg>
- <div class="name">服务器</div>
- <div class="code-name">#iconfuwuqi3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconkaoqinbaobei"></use>
- </svg>
- <div class="name">考勤报备</div>
- <div class="code-name">#iconkaoqinbaobei</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconcomputer1"></use>
- </svg>
- <div class="name">计算机</div>
- <div class="code-name">#iconcomputer1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconyewuyuanyeji-"></use>
- </svg>
- <div class="name">人员</div>
- <div class="code-name">#iconyewuyuanyeji-</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshizhong"></use>
- </svg>
- <div class="name">时钟</div>
- <div class="code-name">#iconshizhong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconmianbankaitong"></use>
- </svg>
- <div class="name">面板开通</div>
- <div class="code-name">#iconmianbankaitong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconGitHub"></use>
- </svg>
- <div class="name">GitHub</div>
- <div class="code-name">#iconGitHub</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon-"></use>
- </svg>
- <div class="name">锁头</div>
- <div class="code-name">#iconicon-</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconmianban"></use>
- </svg>
- <div class="name">面板</div>
- <div class="code-name">#iconmianban</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrili3"></use>
- </svg>
- <div class="name">日历</div>
- <div class="code-name">#iconrili3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconphone1"></use>
- </svg>
- <div class="name">phone</div>
- <div class="code-name">#iconphone1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconjiaohuyanshidonghua"></use>
- </svg>
- <div class="name">交互演示动画</div>
- <div class="code-name">#iconjiaohuyanshidonghua</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion1"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icongailan"></use>
- </svg>
- <div class="name">概览</div>
- <div class="code-name">#icongailan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsousuo2"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsousuo2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshizhong1"></use>
- </svg>
- <div class="name">时钟</div>
- <div class="code-name">#iconshizhong1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshizhong2"></use>
- </svg>
- <div class="name">时钟</div>
- <div class="code-name">#iconshizhong2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrenyuan"></use>
- </svg>
- <div class="name">人员</div>
- <div class="code-name">#iconrenyuan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion2"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshizhong3"></use>
- </svg>
- <div class="name">时钟</div>
- <div class="code-name">#iconshizhong3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshizhong4"></use>
- </svg>
- <div class="name">时钟</div>
- <div class="code-name">#iconshizhong4</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconfuwuqi4"></use>
- </svg>
- <div class="name">服务器</div>
- <div class="code-name">#iconfuwuqi4</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshezhicopy"></use>
- </svg>
- <div class="name">设置 copy 2</div>
- <div class="code-name">#iconshezhicopy</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconphone2"></use>
- </svg>
- <div class="name">phone</div>
- <div class="code-name">#iconphone2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrili4"></use>
- </svg>
- <div class="name">日历</div>
- <div class="code-name">#iconrili4</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconplus2"></use>
- </svg>
- <div class="name">plus</div>
- <div class="code-name">#iconplus2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icongithub"></use>
- </svg>
- <div class="name">github</div>
- <div class="code-name">#icongithub</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconwendang"></use>
- </svg>
- <div class="name">文档</div>
- <div class="code-name">#iconwendang</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconqicheqianlian-1-copy"></use>
- </svg>
- <div class="name">购物车-23</div>
- <div class="code-name">#iconqicheqianlian-1-copy</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconqicheqianlian-1-copy1"></use>
- </svg>
- <div class="name">购物车-23</div>
- <div class="code-name">#iconqicheqianlian-1-copy1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsousuo3"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsousuo3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconyanshihuiyi"></use>
- </svg>
- <div class="name">演示汇报</div>
- <div class="code-name">#iconyanshihuiyi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconphone3"></use>
- </svg>
- <div class="name">phone</div>
- <div class="code-name">#iconphone3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion3"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion4"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion4</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrenyuan1"></use>
- </svg>
- <div class="name">人员 (1)</div>
- <div class="code-name">#iconrenyuan1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconjishuzhichizhichizhinengzhinengfuwufuwuke"></use>
- </svg>
- <div class="name">服务支持</div>
- <div class="code-name">#iconjishuzhichizhichizhinengzhinengfuwufuwuke</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrenyuan2"></use>
- </svg>
- <div class="name">人员</div>
- <div class="code-name">#iconrenyuan2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsoushuo"></use>
- </svg>
- <div class="name">搜索--1</div>
- <div class="code-name">#iconsoushuo</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconfuwuqi5"></use>
- </svg>
- <div class="name">服务器</div>
- <div class="code-name">#iconfuwuqi5</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconenglish"></use>
- </svg>
- <div class="name">english</div>
- <div class="code-name">#iconenglish</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconiconmanagement-"></use>
- </svg>
- <div class="name">Version Changed</div>
- <div class="code-name">#iconiconmanagement-</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsousuo4"></use>
- </svg>
- <div class="name">搜索</div>
- <div class="code-name">#iconsousuo4</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconSUPPORT"></use>
- </svg>
- <div class="name">支持</div>
- <div class="code-name">#iconSUPPORT</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconmianbanbiaoge"></use>
- </svg>
- <div class="name">面板表格</div>
- <div class="code-name">#iconmianbanbiaoge</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconlog-out"></use>
- </svg>
- <div class="name">log-out</div>
- <div class="code-name">#iconlog-out</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshezhi3"></use>
- </svg>
- <div class="name">设 置</div>
- <div class="code-name">#iconshezhi3</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion5"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion5</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconrenwu"></use>
- </svg>
- <div class="name">任务 (1)</div>
- <div class="code-name">#iconrenwu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshizhong5"></use>
- </svg>
- <div class="name">时钟</div>
- <div class="code-name">#iconshizhong5</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconshow"></use>
- </svg>
- <div class="name">演示</div>
- <div class="code-name">#iconshow</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontags"></use>
- </svg>
- <div class="name">tags</div>
- <div class="code-name">#icontags</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon_horn"></use>
- </svg>
- <div class="name">icon_horn</div>
- <div class="code-name">#iconicon_horn</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon_dmail"></use>
- </svg>
- <div class="name">icon_dmail</div>
- <div class="code-name">#iconicon_dmail</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon_message"></use>
- </svg>
- <div class="name">icon_message</div>
- <div class="code-name">#iconicon_message</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon_im_more"></use>
- </svg>
- <div class="name">icon_im_more</div>
- <div class="code-name">#iconicon_im_more</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon_subordinate"></use>
- </svg>
- <div class="name">icon_subordinate</div>
- <div class="code-name">#iconicon_subordinate</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconField-number"></use>
- </svg>
- <div class="name">Field-number</div>
- <div class="code-name">#iconField-number</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icondelete"></use>
- </svg>
- <div class="name">delete</div>
- <div class="code-name">#icondelete</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconicon_English"></use>
- </svg>
- <div class="name">icon_English</div>
- <div class="code-name">#iconicon_English</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontips"></use>
- </svg>
- <div class="name">tips</div>
- <div class="code-name">#icontips</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconsegi-icon-tips"></use>
- </svg>
- <div class="name">segi-icon-tips</div>
- <div class="code-name">#iconsegi-icon-tips</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontips1"></use>
- </svg>
- <div class="name">tips (1)</div>
- <div class="code-name">#icontips1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconTIPS"></use>
- </svg>
- <div class="name">TIPS (2)</div>
- <div class="code-name">#iconTIPS</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconexchange"></use>
- </svg>
- <div class="name">exchange</div>
- <div class="code-name">#iconexchange</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconexchange1"></use>
- </svg>
- <div class="name">exchange (1)</div>
- <div class="code-name">#iconexchange1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconexchange2"></use>
- </svg>
- <div class="name">exchange (2)</div>
- <div class="code-name">#iconexchange2</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconexchange-cny-line"></use>
- </svg>
- <div class="name">exchange-cny-line</div>
- <div class="code-name">#iconexchange-cny-line</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconexcel"></use>
- </svg>
- <div class="name">excel</div>
- <div class="code-name">#iconexcel</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconExcelbangongruanjianbiaoge"></use>
- </svg>
- <div class="name">Excel 办公软件 表格</div>
- <div class="code-name">#iconExcelbangongruanjianbiaoge</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconword"></use>
- </svg>
- <div class="name">word</div>
- <div class="code-name">#iconword</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconword1"></use>
- </svg>
- <div class="name">word (1)</div>
- <div class="code-name">#iconword1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiao-biaoge"></use>
- </svg>
- <div class="name">图表-表格</div>
- <div class="code-name">#icontubiao-biaoge</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiaoxiajiangqushi"></use>
- </svg>
- <div class="name">图表 下降趋势</div>
- <div class="code-name">#icontubiaoxiajiangqushi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiaoduoweizhuzhuangtu"></use>
- </svg>
- <div class="name">图表 多维柱状图</div>
- <div class="code-name">#icontubiaoduoweizhuzhuangtu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiao"></use>
- </svg>
- <div class="name">图表 (1)</div>
- <div class="code-name">#icontubiao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiao1"></use>
- </svg>
- <div class="name">图表 (2)</div>
- <div class="code-name">#icontubiao1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiaozoushitu"></use>
- </svg>
- <div class="name">图表 走势图</div>
- <div class="code-name">#icontubiaozoushitu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icontubiao-hanshu"></use>
- </svg>
- <div class="name">图表-函数</div>
- <div class="code-name">#icontubiao-hanshu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzuzhi"></use>
- </svg>
- <div class="name">组织</div>
- <div class="code-name">#iconzuzhi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzuzhiguanli"></use>
- </svg>
- <div class="name">组织管理</div>
- <div class="code-name">#iconzuzhiguanli</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzuzhiqunti"></use>
- </svg>
- <div class="name">组织群体</div>
- <div class="code-name">#iconzuzhiqunti</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconzhichizhongxin"></use>
- </svg>
- <div class="name">支持中心</div>
- <div class="code-name">#iconzhichizhongxin</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconICPbeianfuwu"></use>
- </svg>
- <div class="name">ICP备案服务</div>
- <div class="code-name">#iconICPbeianfuwu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion6"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion6</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversion7"></use>
- </svg>
- <div class="name">version</div>
- <div class="code-name">#iconversion7</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconversionicon"></use>
- </svg>
- <div class="name">version icon</div>
- <div class="code-name">#iconversionicon</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconlogout-"></use>
- </svg>
- <div class="name">logout-1</div>
- <div class="code-name">#iconlogout-</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#iconks-namespace"></use>
- </svg>
- <div class="name">k8s-namespace</div>
- <div class="code-name">#iconks-namespace</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>