woon/itooldog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
10ee377b801ab72414e808bfba9cabdf65651ab9
itooldog/public/static/iconfont/demo_index.html
T
jhx f5efe88e4d update
2023-03-22 11:41:09 +08:00

4309 lines
148 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<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">
<div class="nav-tabs" style="margin-top: 50px">
<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>
</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">&#xe663;</span>
<div class="name">column-3</div>
<div class="code-name">&amp;#xe663;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe664;</span>
<div class="name">column-4</div>
<div class="code-name">&amp;#xe664;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe665;</span>
<div class="name">add</div>
<div class="code-name">&amp;#xe665;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe666;</span>
<div class="name">add-circle</div>
<div class="code-name">&amp;#xe666;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe667;</span>
<div class="name">adjust</div>
<div class="code-name">&amp;#xe667;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">arrow-up-circle</div>
<div class="code-name">&amp;#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe669;</span>
<div class="name">arrow-right-circle</div>
<div class="code-name">&amp;#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66a;</span>
<div class="name">arrow-down</div>
<div class="code-name">&amp;#xe66a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66b;</span>
<div class="name">ashbin</div>
<div class="code-name">&amp;#xe66b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66c;</span>
<div class="name">arrow-right</div>
<div class="code-name">&amp;#xe66c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66d;</span>
<div class="name">browse</div>
<div class="code-name">&amp;#xe66d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66e;</span>
<div class="name">bottom</div>
<div class="code-name">&amp;#xe66e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66f;</span>
<div class="name">back</div>
<div class="code-name">&amp;#xe66f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe670;</span>
<div class="name">bad</div>
<div class="code-name">&amp;#xe670;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe671;</span>
<div class="name">arrow-double-left</div>
<div class="code-name">&amp;#xe671;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe672;</span>
<div class="name">arrow-left-circle</div>
<div class="code-name">&amp;#xe672;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe673;</span>
<div class="name">arrow-double-right</div>
<div class="code-name">&amp;#xe673;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe674;</span>
<div class="name">caps-lock</div>
<div class="code-name">&amp;#xe674;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe675;</span>
<div class="name">camera</div>
<div class="code-name">&amp;#xe675;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe676;</span>
<div class="name">chart-bar</div>
<div class="code-name">&amp;#xe676;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe677;</span>
<div class="name">attachment</div>
<div class="code-name">&amp;#xe677;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe678;</span>
<div class="name">code</div>
<div class="code-name">&amp;#xe678;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe679;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67a;</span>
<div class="name">check-item</div>
<div class="code-name">&amp;#xe67a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67b;</span>
<div class="name">calendar</div>
<div class="code-name">&amp;#xe67b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67c;</span>
<div class="name">comment</div>
<div class="code-name">&amp;#xe67c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67d;</span>
<div class="name">column-vertical</div>
<div class="code-name">&amp;#xe67d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67e;</span>
<div class="name">column-horizontal</div>
<div class="code-name">&amp;#xe67e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67f;</span>
<div class="name">complete</div>
<div class="code-name">&amp;#xe67f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe680;</span>
<div class="name">chart-pie</div>
<div class="code-name">&amp;#xe680;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe681;</span>
<div class="name">cry</div>
<div class="code-name">&amp;#xe681;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe682;</span>
<div class="name">customer-service</div>
<div class="code-name">&amp;#xe682;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe683;</span>
<div class="name">delete</div>
<div class="code-name">&amp;#xe683;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe684;</span>
<div class="name">direction-down</div>
<div class="code-name">&amp;#xe684;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe685;</span>
<div class="name">copy</div>
<div class="code-name">&amp;#xe685;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe686;</span>
<div class="name">cut</div>
<div class="code-name">&amp;#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe687;</span>
<div class="name">data-view</div>
<div class="code-name">&amp;#xe687;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe688;</span>
<div class="name">direction-down-circle</div>
<div class="code-name">&amp;#xe688;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe689;</span>
<div class="name">direction-right</div>
<div class="code-name">&amp;#xe689;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68a;</span>
<div class="name">direction-up</div>
<div class="code-name">&amp;#xe68a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68b;</span>
<div class="name">discount</div>
<div class="code-name">&amp;#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68c;</span>
<div class="name">direction-left</div>
<div class="code-name">&amp;#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68d;</span>
<div class="name">download</div>
<div class="code-name">&amp;#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68e;</span>
<div class="name">electronics</div>
<div class="code-name">&amp;#xe68e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68f;</span>
<div class="name">drag</div>
<div class="code-name">&amp;#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe690;</span>
<div class="name">elipsis</div>
<div class="code-name">&amp;#xe690;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">export</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe692;</span>
<div class="name">explain</div>
<div class="code-name">&amp;#xe692;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe693;</span>
<div class="name">edit</div>
<div class="code-name">&amp;#xe693;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe694;</span>
<div class="name">eye-close</div>
<div class="code-name">&amp;#xe694;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe695;</span>
<div class="name">email</div>
<div class="code-name">&amp;#xe695;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe696;</span>
<div class="name">error</div>
<div class="code-name">&amp;#xe696;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe697;</span>
<div class="name">favorite</div>
<div class="code-name">&amp;#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe698;</span>
<div class="name">file-common</div>
<div class="code-name">&amp;#xe698;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe699;</span>
<div class="name">file-delete</div>
<div class="code-name">&amp;#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69a;</span>
<div class="name">file-add</div>
<div class="code-name">&amp;#xe69a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69b;</span>
<div class="name">film</div>
<div class="code-name">&amp;#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69c;</span>
<div class="name">fabulous</div>
<div class="code-name">&amp;#xe69c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69d;</span>
<div class="name">file</div>
<div class="code-name">&amp;#xe69d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69e;</span>
<div class="name">folder-close</div>
<div class="code-name">&amp;#xe69e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69f;</span>
<div class="name">filter</div>
<div class="code-name">&amp;#xe69f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a0;</span>
<div class="name">good</div>
<div class="code-name">&amp;#xe6a0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a1;</span>
<div class="name">hide</div>
<div class="code-name">&amp;#xe6a1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a2;</span>
<div class="name">home</div>
<div class="code-name">&amp;#xe6a2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a3;</span>
<div class="name">history</div>
<div class="code-name">&amp;#xe6a3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a4;</span>
<div class="name">file-open</div>
<div class="code-name">&amp;#xe6a4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a5;</span>
<div class="name">forward</div>
<div class="code-name">&amp;#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a6;</span>
<div class="name">import</div>
<div class="code-name">&amp;#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a7;</span>
<div class="name">image-text</div>
<div class="code-name">&amp;#xe6a7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a8;</span>
<div class="name">keyboard-26</div>
<div class="code-name">&amp;#xe6a8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a9;</span>
<div class="name">keyboard-9</div>
<div class="code-name">&amp;#xe6a9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6aa;</span>
<div class="name">link</div>
<div class="code-name">&amp;#xe6aa;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ab;</span>
<div class="name">layout</div>
<div class="code-name">&amp;#xe6ab;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ac;</span>
<div class="name">fullscreen-shrink</div>
<div class="code-name">&amp;#xe6ac;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ad;</span>
<div class="name">layers</div>
<div class="code-name">&amp;#xe6ad;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ae;</span>
<div class="name">lock</div>
<div class="code-name">&amp;#xe6ae;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6af;</span>
<div class="name">fullscreen-expand</div>
<div class="code-name">&amp;#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b0;</span>
<div class="name">map</div>
<div class="code-name">&amp;#xe6b0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b1;</span>
<div class="name">meh</div>
<div class="code-name">&amp;#xe6b1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b2;</span>
<div class="name">menu</div>
<div class="code-name">&amp;#xe6b2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b3;</span>
<div class="name">loading</div>
<div class="code-name">&amp;#xe6b3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b4;</span>
<div class="name">help</div>
<div class="code-name">&amp;#xe6b4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b5;</span>
<div class="name">minus-circle</div>
<div class="code-name">&amp;#xe6b5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b6;</span>
<div class="name">modular</div>
<div class="code-name">&amp;#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b7;</span>
<div class="name">notification</div>
<div class="code-name">&amp;#xe6b7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b8;</span>
<div class="name">mic</div>
<div class="code-name">&amp;#xe6b8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b9;</span>
<div class="name">more</div>
<div class="code-name">&amp;#xe6b9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ba;</span>
<div class="name">pad</div>
<div class="code-name">&amp;#xe6ba;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bb;</span>
<div class="name">operation</div>
<div class="code-name">&amp;#xe6bb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bc;</span>
<div class="name">play</div>
<div class="code-name">&amp;#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bd;</span>
<div class="name">print</div>
<div class="code-name">&amp;#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6be;</span>
<div class="name">mobile-phone</div>
<div class="code-name">&amp;#xe6be;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bf;</span>
<div class="name">minus</div>
<div class="code-name">&amp;#xe6bf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c0;</span>
<div class="name">navigation</div>
<div class="code-name">&amp;#xe6c0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c1;</span>
<div class="name">pdf</div>
<div class="code-name">&amp;#xe6c1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c2;</span>
<div class="name">prompt</div>
<div class="code-name">&amp;#xe6c2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c3;</span>
<div class="name">move</div>
<div class="code-name">&amp;#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c4;</span>
<div class="name">refresh</div>
<div class="code-name">&amp;#xe6c4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c5;</span>
<div class="name">run-up</div>
<div class="code-name">&amp;#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c6;</span>
<div class="name">picture</div>
<div class="code-name">&amp;#xe6c6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c7;</span>
<div class="name">run-in</div>
<div class="code-name">&amp;#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c8;</span>
<div class="name">pin</div>
<div class="code-name">&amp;#xe6c8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c9;</span>
<div class="name">save</div>
<div class="code-name">&amp;#xe6c9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ca;</span>
<div class="name">search</div>
<div class="code-name">&amp;#xe6ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cb;</span>
<div class="name">share</div>
<div class="code-name">&amp;#xe6cb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cc;</span>
<div class="name">scanning</div>
<div class="code-name">&amp;#xe6cc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cd;</span>
<div class="name">security</div>
<div class="code-name">&amp;#xe6cd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ce;</span>
<div class="name">sign-out</div>
<div class="code-name">&amp;#xe6ce;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cf;</span>
<div class="name">select</div>
<div class="code-name">&amp;#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d0;</span>
<div class="name">stop</div>
<div class="code-name">&amp;#xe6d0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d1;</span>
<div class="name">success</div>
<div class="code-name">&amp;#xe6d1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d2;</span>
<div class="name">smile</div>
<div class="code-name">&amp;#xe6d2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d3;</span>
<div class="name">switch</div>
<div class="code-name">&amp;#xe6d3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d4;</span>
<div class="name">setting</div>
<div class="code-name">&amp;#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d5;</span>
<div class="name">survey</div>
<div class="code-name">&amp;#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d6;</span>
<div class="name">task</div>
<div class="code-name">&amp;#xe6d6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d7;</span>
<div class="name">skip</div>
<div class="code-name">&amp;#xe6d7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d8;</span>
<div class="name">text</div>
<div class="code-name">&amp;#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d9;</span>
<div class="name">time</div>
<div class="code-name">&amp;#xe6d9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6da;</span>
<div class="name">telephone-out</div>
<div class="code-name">&amp;#xe6da;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6db;</span>
<div class="name">toggle-left</div>
<div class="code-name">&amp;#xe6db;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dc;</span>
<div class="name">toggle-right</div>
<div class="code-name">&amp;#xe6dc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dd;</span>
<div class="name">telephone</div>
<div class="code-name">&amp;#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6de;</span>
<div class="name">top</div>
<div class="code-name">&amp;#xe6de;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6df;</span>
<div class="name">unlock</div>
<div class="code-name">&amp;#xe6df;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e0;</span>
<div class="name">user</div>
<div class="code-name">&amp;#xe6e0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e1;</span>
<div class="name">upload</div>
<div class="code-name">&amp;#xe6e1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e2;</span>
<div class="name">work</div>
<div class="code-name">&amp;#xe6e2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e3;</span>
<div class="name">training</div>
<div class="code-name">&amp;#xe6e3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e4;</span>
<div class="name">warning</div>
<div class="code-name">&amp;#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e5;</span>
<div class="name">zoom-in</div>
<div class="code-name">&amp;#xe6e5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e6;</span>
<div class="name">zoom-out</div>
<div class="code-name">&amp;#xe6e6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e7;</span>
<div class="name">add-bold</div>
<div class="code-name">&amp;#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e8;</span>
<div class="name">arrow-left-bold</div>
<div class="code-name">&amp;#xe6e8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e9;</span>
<div class="name">arrow-up-bold</div>
<div class="code-name">&amp;#xe6e9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ea;</span>
<div class="name">close-bold</div>
<div class="code-name">&amp;#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6eb;</span>
<div class="name">arrow-down-bold</div>
<div class="code-name">&amp;#xe6eb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ec;</span>
<div class="name">minus-bold</div>
<div class="code-name">&amp;#xe6ec;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ed;</span>
<div class="name">arrow-right-bold</div>
<div class="code-name">&amp;#xe6ed;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ee;</span>
<div class="name">select-bold</div>
<div class="code-name">&amp;#xe6ee;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ef;</span>
<div class="name">arrow-up-filling</div>
<div class="code-name">&amp;#xe6ef;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f0;</span>
<div class="name">arrow-down-filling</div>
<div class="code-name">&amp;#xe6f0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f1;</span>
<div class="name">arrow-left-filling</div>
<div class="code-name">&amp;#xe6f1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f2;</span>
<div class="name">arrow-right-filling</div>
<div class="code-name">&amp;#xe6f2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f3;</span>
<div class="name">caps-unlock-filling</div>
<div class="code-name">&amp;#xe6f3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f4;</span>
<div class="name">comment-filling</div>
<div class="code-name">&amp;#xe6f4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f5;</span>
<div class="name">check-item-filling</div>
<div class="code-name">&amp;#xe6f5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f6;</span>
<div class="name">clock-filling</div>
<div class="code-name">&amp;#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f7;</span>
<div class="name">delete-filling</div>
<div class="code-name">&amp;#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f8;</span>
<div class="name">decline-filling</div>
<div class="code-name">&amp;#xe6f8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f9;</span>
<div class="name">dynamic-filling</div>
<div class="code-name">&amp;#xe6f9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fa;</span>
<div class="name">intermediate-filling</div>
<div class="code-name">&amp;#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fb;</span>
<div class="name">favorite-filling</div>
<div class="code-name">&amp;#xe6fb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fc;</span>
<div class="name">layout-filling</div>
<div class="code-name">&amp;#xe6fc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fd;</span>
<div class="name">help-filling</div>
<div class="code-name">&amp;#xe6fd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fe;</span>
<div class="name">history-filling</div>
<div class="code-name">&amp;#xe6fe;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ff;</span>
<div class="name">filter-filling</div>
<div class="code-name">&amp;#xe6ff;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe700;</span>
<div class="name">file-common-filling</div>
<div class="code-name">&amp;#xe700;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe701;</span>
<div class="name">news-filling</div>
<div class="code-name">&amp;#xe701;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe702;</span>
<div class="name">edit-filling</div>
<div class="code-name">&amp;#xe702;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe703;</span>
<div class="name">fullscreen-expand-filling</div>
<div class="code-name">&amp;#xe703;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe704;</span>
<div class="name">smile-filling</div>
<div class="code-name">&amp;#xe704;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe705;</span>
<div class="name">rise-filling</div>
<div class="code-name">&amp;#xe705;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe706;</span>
<div class="name">picture-filling</div>
<div class="code-name">&amp;#xe706;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe707;</span>
<div class="name">notification-filling</div>
<div class="code-name">&amp;#xe707;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe708;</span>
<div class="name">user-filling</div>
<div class="code-name">&amp;#xe708;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe709;</span>
<div class="name">setting-filling</div>
<div class="code-name">&amp;#xe709;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70a;</span>
<div class="name">switch-filling</div>
<div class="code-name">&amp;#xe70a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70b;</span>
<div class="name">work-filling</div>
<div class="code-name">&amp;#xe70b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70c;</span>
<div class="name">task-filling</div>
<div class="code-name">&amp;#xe70c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70d;</span>
<div class="name">success-filling</div>
<div class="code-name">&amp;#xe70d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70e;</span>
<div class="name">warning-filling</div>
<div class="code-name">&amp;#xe70e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70f;</span>
<div class="name">folder-filling</div>
<div class="code-name">&amp;#xe70f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe710;</span>
<div class="name">map-filling</div>
<div class="code-name">&amp;#xe710;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe711;</span>
<div class="name">prompt-filling</div>
<div class="code-name">&amp;#xe711;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe712;</span>
<div class="name">meh-filling</div>
<div class="code-name">&amp;#xe712;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe713;</span>
<div class="name">cry-filling</div>
<div class="code-name">&amp;#xe713;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe714;</span>
<div class="name">top-filling</div>
<div class="code-name">&amp;#xe714;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe715;</span>
<div class="name">home-filling</div>
<div class="code-name">&amp;#xe715;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe716;</span>
<div class="name">sorting</div>
<div class="code-name">&amp;#xe716;</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"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-3column"></span>
<div class="name">
column-3
</div>
<div class="code-name">.icon-3column
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-column-4"></span>
<div class="name">
column-4
</div>
<div class="code-name">.icon-column-4
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-add"></span>
<div class="name">
add
</div>
<div class="code-name">.icon-add
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-add-circle"></span>
<div class="name">
add-circle
</div>
<div class="code-name">.icon-add-circle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-adjust"></span>
<div class="name">
adjust
</div>
<div class="code-name">.icon-adjust
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-up-circle"></span>
<div class="name">
arrow-up-circle
</div>
<div class="code-name">.icon-arrow-up-circle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right-circle"></span>
<div class="name">
arrow-right-circle
</div>
<div class="code-name">.icon-arrow-right-circle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-down"></span>
<div class="name">
arrow-down
</div>
<div class="code-name">.icon-arrow-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ashbin"></span>
<div class="name">
ashbin
</div>
<div class="code-name">.icon-ashbin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right"></span>
<div class="name">
arrow-right
</div>
<div class="code-name">.icon-arrow-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-browse"></span>
<div class="name">
browse
</div>
<div class="code-name">.icon-browse
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bottom"></span>
<div class="name">
bottom
</div>
<div class="code-name">.icon-bottom
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-back"></span>
<div class="name">
back
</div>
<div class="code-name">.icon-back
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bad"></span>
<div class="name">
bad
</div>
<div class="code-name">.icon-bad
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-double-left"></span>
<div class="name">
arrow-double-left
</div>
<div class="code-name">.icon-arrow-double-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left-circle"></span>
<div class="name">
arrow-left-circle
</div>
<div class="code-name">.icon-arrow-left-circle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-double-right"></span>
<div class="name">
arrow-double-right
</div>
<div class="code-name">.icon-arrow-double-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caps-lock"></span>
<div class="name">
caps-lock
</div>
<div class="code-name">.icon-caps-lock
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-camera"></span>
<div class="name">
camera
</div>
<div class="code-name">.icon-camera
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chart-bar"></span>
<div class="name">
chart-bar
</div>
<div class="code-name">.icon-chart-bar
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-attachment"></span>
<div class="name">
attachment
</div>
<div class="code-name">.icon-attachment
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-code"></span>
<div class="name">
code
</div>
<div class="code-name">.icon-code
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close"></span>
<div class="name">
close
</div>
<div class="code-name">.icon-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-check-item"></span>
<div class="name">
check-item
</div>
<div class="code-name">.icon-check-item
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-calendar"></span>
<div class="name">
calendar
</div>
<div class="code-name">.icon-calendar
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-comment"></span>
<div class="name">
comment
</div>
<div class="code-name">.icon-comment
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-column-vertical"></span>
<div class="name">
column-vertical
</div>
<div class="code-name">.icon-column-vertical
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-column-horizontal"></span>
<div class="name">
column-horizontal
</div>
<div class="code-name">.icon-column-horizontal
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-complete"></span>
<div class="name">
complete
</div>
<div class="code-name">.icon-complete
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chart-pie"></span>
<div class="name">
chart-pie
</div>
<div class="code-name">.icon-chart-pie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cry"></span>
<div class="name">
cry
</div>
<div class="code-name">.icon-cry
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-customer-service"></span>
<div class="name">
customer-service
</div>
<div class="code-name">.icon-customer-service
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-delete"></span>
<div class="name">
delete
</div>
<div class="code-name">.icon-delete
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-direction-down"></span>
<div class="name">
direction-down
</div>
<div class="code-name">.icon-direction-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-copy"></span>
<div class="name">
copy
</div>
<div class="code-name">.icon-copy
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cut"></span>
<div class="name">
cut
</div>
<div class="code-name">.icon-cut
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-data-view"></span>
<div class="name">
data-view
</div>
<div class="code-name">.icon-data-view
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-direction-down-circle"></span>
<div class="name">
direction-down-circle
</div>
<div class="code-name">.icon-direction-down-circle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-direction-right"></span>
<div class="name">
direction-right
</div>
<div class="code-name">.icon-direction-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-direction-up"></span>
<div class="name">
direction-up
</div>
<div class="code-name">.icon-direction-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-discount"></span>
<div class="name">
discount
</div>
<div class="code-name">.icon-discount
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-direction-left"></span>
<div class="name">
direction-left
</div>
<div class="code-name">.icon-direction-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-download"></span>
<div class="name">
download
</div>
<div class="code-name">.icon-download
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-electronics"></span>
<div class="name">
electronics
</div>
<div class="code-name">.icon-electronics
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-drag"></span>
<div class="name">
drag
</div>
<div class="code-name">.icon-drag
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-elipsis"></span>
<div class="name">
elipsis
</div>
<div class="code-name">.icon-elipsis
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-export"></span>
<div class="name">
export
</div>
<div class="code-name">.icon-export
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-explain"></span>
<div class="name">
explain
</div>
<div class="code-name">.icon-explain
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edit"></span>
<div class="name">
edit
</div>
<div class="code-name">.icon-edit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-eye-close"></span>
<div class="name">
eye-close
</div>
<div class="code-name">.icon-eye-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-email"></span>
<div class="name">
email
</div>
<div class="code-name">.icon-email
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-error"></span>
<div class="name">
error
</div>
<div class="code-name">.icon-error
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-favorite"></span>
<div class="name">
favorite
</div>
<div class="code-name">.icon-favorite
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-file-common"></span>
<div class="name">
file-common
</div>
<div class="code-name">.icon-file-common
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-file-delete"></span>
<div class="name">
file-delete
</div>
<div class="code-name">.icon-file-delete
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-file-add"></span>
<div class="name">
file-add
</div>
<div class="code-name">.icon-file-add
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-film"></span>
<div class="name">
film
</div>
<div class="code-name">.icon-film
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fabulous"></span>
<div class="name">
fabulous
</div>
<div class="code-name">.icon-fabulous
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-file"></span>
<div class="name">
file
</div>
<div class="code-name">.icon-file
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-folder-close"></span>
<div class="name">
folder-close
</div>
<div class="code-name">.icon-folder-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-filter"></span>
<div class="name">
filter
</div>
<div class="code-name">.icon-filter
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-good"></span>
<div class="name">
good
</div>
<div class="code-name">.icon-good
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hide"></span>
<div class="name">
hide
</div>
<div class="code-name">.icon-hide
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home"></span>
<div class="name">
home
</div>
<div class="code-name">.icon-home
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-history"></span>
<div class="name">
history
</div>
<div class="code-name">.icon-history
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-file-open"></span>
<div class="name">
file-open
</div>
<div class="code-name">.icon-file-open
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-forward"></span>
<div class="name">
forward
</div>
<div class="code-name">.icon-forward
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-import"></span>
<div class="name">
import
</div>
<div class="code-name">.icon-import
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-image-text"></span>
<div class="name">
image-text
</div>
<div class="code-name">.icon-image-text
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keyboard-26"></span>
<div class="name">
keyboard-26
</div>
<div class="code-name">.icon-keyboard-26
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keyboard-9"></span>
<div class="name">
keyboard-9
</div>
<div class="code-name">.icon-keyboard-9
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-link"></span>
<div class="name">
link
</div>
<div class="code-name">.icon-link
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-layout"></span>
<div class="name">
layout
</div>
<div class="code-name">.icon-layout
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fullscreen-shrink"></span>
<div class="name">
fullscreen-shrink
</div>
<div class="code-name">.icon-fullscreen-shrink
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-layers"></span>
<div class="name">
layers
</div>
<div class="code-name">.icon-layers
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lock"></span>
<div class="name">
lock
</div>
<div class="code-name">.icon-lock
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fullscreen-expand"></span>
<div class="name">
fullscreen-expand
</div>
<div class="code-name">.icon-fullscreen-expand
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-map"></span>
<div class="name">
map
</div>
<div class="code-name">.icon-map
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-meh"></span>
<div class="name">
meh
</div>
<div class="code-name">.icon-meh
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-menu"></span>
<div class="name">
menu
</div>
<div class="code-name">.icon-menu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-loading"></span>
<div class="name">
loading
</div>
<div class="code-name">.icon-loading
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-help"></span>
<div class="name">
help
</div>
<div class="code-name">.icon-help
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-minus-circle"></span>
<div class="name">
minus-circle
</div>
<div class="code-name">.icon-minus-circle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-modular"></span>
<div class="name">
modular
</div>
<div class="code-name">.icon-modular
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-notification"></span>
<div class="name">
notification
</div>
<div class="code-name">.icon-notification
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mic"></span>
<div class="name">
mic
</div>
<div class="code-name">.icon-mic
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-more"></span>
<div class="name">
more
</div>
<div class="code-name">.icon-more
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pad"></span>
<div class="name">
pad
</div>
<div class="code-name">.icon-pad
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-operation"></span>
<div class="name">
operation
</div>
<div class="code-name">.icon-operation
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-play"></span>
<div class="name">
play
</div>
<div class="code-name">.icon-play
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-print"></span>
<div class="name">
print
</div>
<div class="code-name">.icon-print
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mobile-phone"></span>
<div class="name">
mobile-phone
</div>
<div class="code-name">.icon-mobile-phone
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-minus"></span>
<div class="name">
minus
</div>
<div class="code-name">.icon-minus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-navigation"></span>
<div class="name">
navigation
</div>
<div class="code-name">.icon-navigation
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pdf"></span>
<div class="name">
pdf
</div>
<div class="code-name">.icon-pdf
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-prompt"></span>
<div class="name">
prompt
</div>
<div class="code-name">.icon-prompt
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-move"></span>
<div class="name">
move
</div>
<div class="code-name">.icon-move
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-refresh"></span>
<div class="name">
refresh
</div>
<div class="code-name">.icon-refresh
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-run-up"></span>
<div class="name">
run-up
</div>
<div class="code-name">.icon-run-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-picture"></span>
<div class="name">
picture
</div>
<div class="code-name">.icon-picture
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-run-in"></span>
<div class="name">
run-in
</div>
<div class="code-name">.icon-run-in
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pin"></span>
<div class="name">
pin
</div>
<div class="code-name">.icon-pin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-save"></span>
<div class="name">
save
</div>
<div class="code-name">.icon-save
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search"></span>
<div class="name">
search
</div>
<div class="code-name">.icon-search
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-share"></span>
<div class="name">
share
</div>
<div class="code-name">.icon-share
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-scanning"></span>
<div class="name">
scanning
</div>
<div class="code-name">.icon-scanning
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-security"></span>
<div class="name">
security
</div>
<div class="code-name">.icon-security
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sign-out"></span>
<div class="name">
sign-out
</div>
<div class="code-name">.icon-sign-out
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-select"></span>
<div class="name">
select
</div>
<div class="code-name">.icon-select
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-stop"></span>
<div class="name">
stop
</div>
<div class="code-name">.icon-stop
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-success"></span>
<div class="name">
success
</div>
<div class="code-name">.icon-success
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-smile"></span>
<div class="name">
smile
</div>
<div class="code-name">.icon-smile
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-switch"></span>
<div class="name">
switch
</div>
<div class="code-name">.icon-switch
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-setting"></span>
<div class="name">
setting
</div>
<div class="code-name">.icon-setting
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-survey"></span>
<div class="name">
survey
</div>
<div class="code-name">.icon-survey
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-task"></span>
<div class="name">
task
</div>
<div class="code-name">.icon-task
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-skip"></span>
<div class="name">
skip
</div>
<div class="code-name">.icon-skip
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-text"></span>
<div class="name">
text
</div>
<div class="code-name">.icon-text
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-time"></span>
<div class="name">
time
</div>
<div class="code-name">.icon-time
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-telephone-out"></span>
<div class="name">
telephone-out
</div>
<div class="code-name">.icon-telephone-out
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-toggle-left"></span>
<div class="name">
toggle-left
</div>
<div class="code-name">.icon-toggle-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-toggle-right"></span>
<div class="name">
toggle-right
</div>
<div class="code-name">.icon-toggle-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-telephone"></span>
<div class="name">
telephone
</div>
<div class="code-name">.icon-telephone
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-top"></span>
<div class="name">
top
</div>
<div class="code-name">.icon-top
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-unlock"></span>
<div class="name">
unlock
</div>
<div class="code-name">.icon-unlock
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-user"></span>
<div class="name">
user
</div>
<div class="code-name">.icon-user
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-upload"></span>
<div class="name">
upload
</div>
<div class="code-name">.icon-upload
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-work"></span>
<div class="name">
work
</div>
<div class="code-name">.icon-work
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-training"></span>
<div class="name">
training
</div>
<div class="code-name">.icon-training
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-warning"></span>
<div class="name">
warning
</div>
<div class="code-name">.icon-warning
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zoom-in"></span>
<div class="name">
zoom-in
</div>
<div class="code-name">.icon-zoom-in
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zoom-out"></span>
<div class="name">
zoom-out
</div>
<div class="code-name">.icon-zoom-out
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-add-bold"></span>
<div class="name">
add-bold
</div>
<div class="code-name">.icon-add-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left-bold"></span>
<div class="name">
arrow-left-bold
</div>
<div class="code-name">.icon-arrow-left-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-up-bold"></span>
<div class="name">
arrow-up-bold
</div>
<div class="code-name">.icon-arrow-up-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close-bold"></span>
<div class="name">
close-bold
</div>
<div class="code-name">.icon-close-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-down-bold"></span>
<div class="name">
arrow-down-bold
</div>
<div class="code-name">.icon-arrow-down-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-minus-bold"></span>
<div class="name">
minus-bold
</div>
<div class="code-name">.icon-minus-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right-bold"></span>
<div class="name">
arrow-right-bold
</div>
<div class="code-name">.icon-arrow-right-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-select-bold"></span>
<div class="name">
select-bold
</div>
<div class="code-name">.icon-select-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-up-filling"></span>
<div class="name">
arrow-up-filling
</div>
<div class="code-name">.icon-arrow-up-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-down-filling"></span>
<div class="name">
arrow-down-filling
</div>
<div class="code-name">.icon-arrow-down-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left-filling"></span>
<div class="name">
arrow-left-filling
</div>
<div class="code-name">.icon-arrow-left-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right-filling"></span>
<div class="name">
arrow-right-filling
</div>
<div class="code-name">.icon-arrow-right-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caps-unlock-filling"></span>
<div class="name">
caps-unlock-filling
</div>
<div class="code-name">.icon-caps-unlock-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-comment-filling"></span>
<div class="name">
comment-filling
</div>
<div class="code-name">.icon-comment-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-check-item-filling"></span>
<div class="name">
check-item-filling
</div>
<div class="code-name">.icon-check-item-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clock-filling"></span>
<div class="name">
clock-filling
</div>
<div class="code-name">.icon-clock-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-delete-filling"></span>
<div class="name">
delete-filling
</div>
<div class="code-name">.icon-delete-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-decline-filling"></span>
<div class="name">
decline-filling
</div>
<div class="code-name">.icon-decline-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dynamic-filling"></span>
<div class="name">
dynamic-filling
</div>
<div class="code-name">.icon-dynamic-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-intermediate-filling"></span>
<div class="name">
intermediate-filling
</div>
<div class="code-name">.icon-intermediate-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-favorite-filling"></span>
<div class="name">
favorite-filling
</div>
<div class="code-name">.icon-favorite-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-layout-filling"></span>
<div class="name">
layout-filling
</div>
<div class="code-name">.icon-layout-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-help-filling"></span>
<div class="name">
help-filling
</div>
<div class="code-name">.icon-help-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-history-filling"></span>
<div class="name">
history-filling
</div>
<div class="code-name">.icon-history-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-filter-filling"></span>
<div class="name">
filter-filling
</div>
<div class="code-name">.icon-filter-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-file-common-filling"></span>
<div class="name">
file-common-filling
</div>
<div class="code-name">.icon-file-common-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-news-filling"></span>
<div class="name">
news-filling
</div>
<div class="code-name">.icon-news-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edit-filling"></span>
<div class="name">
edit-filling
</div>
<div class="code-name">.icon-edit-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fullscreen-expand-filling"></span>
<div class="name">
fullscreen-expand-filling
</div>
<div class="code-name">.icon-fullscreen-expand-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-smile-filling"></span>
<div class="name">
smile-filling
</div>
<div class="code-name">.icon-smile-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-rise-filling"></span>
<div class="name">
rise-filling
</div>
<div class="code-name">.icon-rise-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-picture-filling"></span>
<div class="name">
picture-filling
</div>
<div class="code-name">.icon-picture-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-notification-filling"></span>
<div class="name">
notification-filling
</div>
<div class="code-name">.icon-notification-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-user-filling"></span>
<div class="name">
user-filling
</div>
<div class="code-name">.icon-user-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-setting-filling"></span>
<div class="name">
setting-filling
</div>
<div class="code-name">.icon-setting-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-switch-filling"></span>
<div class="name">
switch-filling
</div>
<div class="code-name">.icon-switch-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-work-filling"></span>
<div class="name">
work-filling
</div>
<div class="code-name">.icon-work-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-task-filling"></span>
<div class="name">
task-filling
</div>
<div class="code-name">.icon-task-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-success-filling"></span>
<div class="name">
success-filling
</div>
<div class="code-name">.icon-success-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-warning-filling"></span>
<div class="name">
warning-filling
</div>
<div class="code-name">.icon-warning-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-folder-filling"></span>
<div class="name">
folder-filling
</div>
<div class="code-name">.icon-folder-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-map-filling"></span>
<div class="name">
map-filling
</div>
<div class="code-name">.icon-map-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-prompt-filling"></span>
<div class="name">
prompt-filling
</div>
<div class="code-name">.icon-prompt-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-meh-filling"></span>
<div class="name">
meh-filling
</div>
<div class="code-name">.icon-meh-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cry-filling"></span>
<div class="name">
cry-filling
</div>
<div class="code-name">.icon-cry-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-top-filling"></span>
<div class="name">
top-filling
</div>
<div class="code-name">.icon-top-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home-filling"></span>
<div class="name">
home-filling
</div>
<div class="code-name">.icon-home-filling
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sorting"></span>
<div class="name">
sorting
</div>
<div class="code-name">.icon-sorting
</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">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-3column"></use>
</svg>
<div class="name">column-3</div>
<div class="code-name">#icon-3column</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-column-4"></use>
</svg>
<div class="name">column-4</div>
<div class="code-name">#icon-column-4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
<div class="name">add</div>
<div class="code-name">#icon-add</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-add-circle"></use>
</svg>
<div class="name">add-circle</div>
<div class="code-name">#icon-add-circle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-adjust"></use>
</svg>
<div class="name">adjust</div>
<div class="code-name">#icon-adjust</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-up-circle"></use>
</svg>
<div class="name">arrow-up-circle</div>
<div class="code-name">#icon-arrow-up-circle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right-circle"></use>
</svg>
<div class="name">arrow-right-circle</div>
<div class="code-name">#icon-arrow-right-circle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-down"></use>
</svg>
<div class="name">arrow-down</div>
<div class="code-name">#icon-arrow-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ashbin"></use>
</svg>
<div class="name">ashbin</div>
<div class="code-name">#icon-ashbin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right"></use>
</svg>
<div class="name">arrow-right</div>
<div class="code-name">#icon-arrow-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-browse"></use>
</svg>
<div class="name">browse</div>
<div class="code-name">#icon-browse</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bottom"></use>
</svg>
<div class="name">bottom</div>
<div class="code-name">#icon-bottom</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-back"></use>
</svg>
<div class="name">back</div>
<div class="code-name">#icon-back</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bad"></use>
</svg>
<div class="name">bad</div>
<div class="code-name">#icon-bad</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-double-left"></use>
</svg>
<div class="name">arrow-double-left</div>
<div class="code-name">#icon-arrow-double-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left-circle"></use>
</svg>
<div class="name">arrow-left-circle</div>
<div class="code-name">#icon-arrow-left-circle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-double-right"></use>
</svg>
<div class="name">arrow-double-right</div>
<div class="code-name">#icon-arrow-double-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caps-lock"></use>
</svg>
<div class="name">caps-lock</div>
<div class="code-name">#icon-caps-lock</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-camera"></use>
</svg>
<div class="name">camera</div>
<div class="code-name">#icon-camera</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chart-bar"></use>
</svg>
<div class="name">chart-bar</div>
<div class="code-name">#icon-chart-bar</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-attachment"></use>
</svg>
<div class="name">attachment</div>
<div class="code-name">#icon-attachment</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-code"></use>
</svg>
<div class="name">code</div>
<div class="code-name">#icon-code</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">close</div>
<div class="code-name">#icon-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-check-item"></use>
</svg>
<div class="name">check-item</div>
<div class="code-name">#icon-check-item</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-calendar"></use>
</svg>
<div class="name">calendar</div>
<div class="code-name">#icon-calendar</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-comment"></use>
</svg>
<div class="name">comment</div>
<div class="code-name">#icon-comment</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-column-vertical"></use>
</svg>
<div class="name">column-vertical</div>
<div class="code-name">#icon-column-vertical</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-column-horizontal"></use>
</svg>
<div class="name">column-horizontal</div>
<div class="code-name">#icon-column-horizontal</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-complete"></use>
</svg>
<div class="name">complete</div>
<div class="code-name">#icon-complete</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chart-pie"></use>
</svg>
<div class="name">chart-pie</div>
<div class="code-name">#icon-chart-pie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cry"></use>
</svg>
<div class="name">cry</div>
<div class="code-name">#icon-cry</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-customer-service"></use>
</svg>
<div class="name">customer-service</div>
<div class="code-name">#icon-customer-service</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-delete"></use>
</svg>
<div class="name">delete</div>
<div class="code-name">#icon-delete</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-direction-down"></use>
</svg>
<div class="name">direction-down</div>
<div class="code-name">#icon-direction-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-copy"></use>
</svg>
<div class="name">copy</div>
<div class="code-name">#icon-copy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cut"></use>
</svg>
<div class="name">cut</div>
<div class="code-name">#icon-cut</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-data-view"></use>
</svg>
<div class="name">data-view</div>
<div class="code-name">#icon-data-view</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-direction-down-circle"></use>
</svg>
<div class="name">direction-down-circle</div>
<div class="code-name">#icon-direction-down-circle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-direction-right"></use>
</svg>
<div class="name">direction-right</div>
<div class="code-name">#icon-direction-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-direction-up"></use>
</svg>
<div class="name">direction-up</div>
<div class="code-name">#icon-direction-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-discount"></use>
</svg>
<div class="name">discount</div>
<div class="code-name">#icon-discount</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-direction-left"></use>
</svg>
<div class="name">direction-left</div>
<div class="code-name">#icon-direction-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-download"></use>
</svg>
<div class="name">download</div>
<div class="code-name">#icon-download</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-electronics"></use>
</svg>
<div class="name">electronics</div>
<div class="code-name">#icon-electronics</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-drag"></use>
</svg>
<div class="name">drag</div>
<div class="code-name">#icon-drag</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-elipsis"></use>
</svg>
<div class="name">elipsis</div>
<div class="code-name">#icon-elipsis</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-export"></use>
</svg>
<div class="name">export</div>
<div class="code-name">#icon-export</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-explain"></use>
</svg>
<div class="name">explain</div>
<div class="code-name">#icon-explain</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit"></use>
</svg>
<div class="name">edit</div>
<div class="code-name">#icon-edit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-eye-close"></use>
</svg>
<div class="name">eye-close</div>
<div class="code-name">#icon-eye-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-email"></use>
</svg>
<div class="name">email</div>
<div class="code-name">#icon-email</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-error"></use>
</svg>
<div class="name">error</div>
<div class="code-name">#icon-error</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-favorite"></use>
</svg>
<div class="name">favorite</div>
<div class="code-name">#icon-favorite</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-file-common"></use>
</svg>
<div class="name">file-common</div>
<div class="code-name">#icon-file-common</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-file-delete"></use>
</svg>
<div class="name">file-delete</div>
<div class="code-name">#icon-file-delete</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-file-add"></use>
</svg>
<div class="name">file-add</div>
<div class="code-name">#icon-file-add</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-film"></use>
</svg>
<div class="name">film</div>
<div class="code-name">#icon-film</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fabulous"></use>
</svg>
<div class="name">fabulous</div>
<div class="code-name">#icon-fabulous</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-file"></use>
</svg>
<div class="name">file</div>
<div class="code-name">#icon-file</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-folder-close"></use>
</svg>
<div class="name">folder-close</div>
<div class="code-name">#icon-folder-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-filter"></use>
</svg>
<div class="name">filter</div>
<div class="code-name">#icon-filter</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-good"></use>
</svg>
<div class="name">good</div>
<div class="code-name">#icon-good</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-hide"></use>
</svg>
<div class="name">hide</div>
<div class="code-name">#icon-hide</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
<div class="name">home</div>
<div class="code-name">#icon-home</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-history"></use>
</svg>
<div class="name">history</div>
<div class="code-name">#icon-history</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-file-open"></use>
</svg>
<div class="name">file-open</div>
<div class="code-name">#icon-file-open</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-forward"></use>
</svg>
<div class="name">forward</div>
<div class="code-name">#icon-forward</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-import"></use>
</svg>
<div class="name">import</div>
<div class="code-name">#icon-import</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-image-text"></use>
</svg>
<div class="name">image-text</div>
<div class="code-name">#icon-image-text</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keyboard-26"></use>
</svg>
<div class="name">keyboard-26</div>
<div class="code-name">#icon-keyboard-26</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keyboard-9"></use>
</svg>
<div class="name">keyboard-9</div>
<div class="code-name">#icon-keyboard-9</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-link"></use>
</svg>
<div class="name">link</div>
<div class="code-name">#icon-link</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-layout"></use>
</svg>
<div class="name">layout</div>
<div class="code-name">#icon-layout</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fullscreen-shrink"></use>
</svg>
<div class="name">fullscreen-shrink</div>
<div class="code-name">#icon-fullscreen-shrink</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-layers"></use>
</svg>
<div class="name">layers</div>
<div class="code-name">#icon-layers</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-lock"></use>
</svg>
<div class="name">lock</div>
<div class="code-name">#icon-lock</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fullscreen-expand"></use>
</svg>
<div class="name">fullscreen-expand</div>
<div class="code-name">#icon-fullscreen-expand</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-map"></use>
</svg>
<div class="name">map</div>
<div class="code-name">#icon-map</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-meh"></use>
</svg>
<div class="name">meh</div>
<div class="code-name">#icon-meh</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-menu"></use>
</svg>
<div class="name">menu</div>
<div class="code-name">#icon-menu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-loading"></use>
</svg>
<div class="name">loading</div>
<div class="code-name">#icon-loading</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-help"></use>
</svg>
<div class="name">help</div>
<div class="code-name">#icon-help</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-minus-circle"></use>
</svg>
<div class="name">minus-circle</div>
<div class="code-name">#icon-minus-circle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-modular"></use>
</svg>
<div class="name">modular</div>
<div class="code-name">#icon-modular</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-notification"></use>
</svg>
<div class="name">notification</div>
<div class="code-name">#icon-notification</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mic"></use>
</svg>
<div class="name">mic</div>
<div class="code-name">#icon-mic</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-more"></use>
</svg>
<div class="name">more</div>
<div class="code-name">#icon-more</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pad"></use>
</svg>
<div class="name">pad</div>
<div class="code-name">#icon-pad</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-operation"></use>
</svg>
<div class="name">operation</div>
<div class="code-name">#icon-operation</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-play"></use>
</svg>
<div class="name">play</div>
<div class="code-name">#icon-play</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-print"></use>
</svg>
<div class="name">print</div>
<div class="code-name">#icon-print</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mobile-phone"></use>
</svg>
<div class="name">mobile-phone</div>
<div class="code-name">#icon-mobile-phone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg>
<div class="name">minus</div>
<div class="code-name">#icon-minus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-navigation"></use>
</svg>
<div class="name">navigation</div>
<div class="code-name">#icon-navigation</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pdf"></use>
</svg>
<div class="name">pdf</div>
<div class="code-name">#icon-pdf</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-prompt"></use>
</svg>
<div class="name">prompt</div>
<div class="code-name">#icon-prompt</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-move"></use>
</svg>
<div class="name">move</div>
<div class="code-name">#icon-move</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-refresh"></use>
</svg>
<div class="name">refresh</div>
<div class="code-name">#icon-refresh</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-run-up"></use>
</svg>
<div class="name">run-up</div>
<div class="code-name">#icon-run-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-picture"></use>
</svg>
<div class="name">picture</div>
<div class="code-name">#icon-picture</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-run-in"></use>
</svg>
<div class="name">run-in</div>
<div class="code-name">#icon-run-in</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pin"></use>
</svg>
<div class="name">pin</div>
<div class="code-name">#icon-pin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-save"></use>
</svg>
<div class="name">save</div>
<div class="code-name">#icon-save</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search"></use>
</svg>
<div class="name">search</div>
<div class="code-name">#icon-search</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-share"></use>
</svg>
<div class="name">share</div>
<div class="code-name">#icon-share</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-scanning"></use>
</svg>
<div class="name">scanning</div>
<div class="code-name">#icon-scanning</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-security"></use>
</svg>
<div class="name">security</div>
<div class="code-name">#icon-security</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sign-out"></use>
</svg>
<div class="name">sign-out</div>
<div class="code-name">#icon-sign-out</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-select"></use>
</svg>
<div class="name">select</div>
<div class="code-name">#icon-select</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-stop"></use>
</svg>
<div class="name">stop</div>
<div class="code-name">#icon-stop</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-success"></use>
</svg>
<div class="name">success</div>
<div class="code-name">#icon-success</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-smile"></use>
</svg>
<div class="name">smile</div>
<div class="code-name">#icon-smile</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-switch"></use>
</svg>
<div class="name">switch</div>
<div class="code-name">#icon-switch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-setting"></use>
</svg>
<div class="name">setting</div>
<div class="code-name">#icon-setting</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-survey"></use>
</svg>
<div class="name">survey</div>
<div class="code-name">#icon-survey</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-task"></use>
</svg>
<div class="name">task</div>
<div class="code-name">#icon-task</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-skip"></use>
</svg>
<div class="name">skip</div>
<div class="code-name">#icon-skip</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-text"></use>
</svg>
<div class="name">text</div>
<div class="code-name">#icon-text</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-time"></use>
</svg>
<div class="name">time</div>
<div class="code-name">#icon-time</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-telephone-out"></use>
</svg>
<div class="name">telephone-out</div>
<div class="code-name">#icon-telephone-out</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-toggle-left"></use>
</svg>
<div class="name">toggle-left</div>
<div class="code-name">#icon-toggle-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-toggle-right"></use>
</svg>
<div class="name">toggle-right</div>
<div class="code-name">#icon-toggle-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-telephone"></use>
</svg>
<div class="name">telephone</div>
<div class="code-name">#icon-telephone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-top"></use>
</svg>
<div class="name">top</div>
<div class="code-name">#icon-top</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-unlock"></use>
</svg>
<div class="name">unlock</div>
<div class="code-name">#icon-unlock</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
<div class="name">user</div>
<div class="code-name">#icon-user</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-upload"></use>
</svg>
<div class="name">upload</div>
<div class="code-name">#icon-upload</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-work"></use>
</svg>
<div class="name">work</div>
<div class="code-name">#icon-work</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-training"></use>
</svg>
<div class="name">training</div>
<div class="code-name">#icon-training</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-warning"></use>
</svg>
<div class="name">warning</div>
<div class="code-name">#icon-warning</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zoom-in"></use>
</svg>
<div class="name">zoom-in</div>
<div class="code-name">#icon-zoom-in</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zoom-out"></use>
</svg>
<div class="name">zoom-out</div>
<div class="code-name">#icon-zoom-out</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-add-bold"></use>
</svg>
<div class="name">add-bold</div>
<div class="code-name">#icon-add-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left-bold"></use>
</svg>
<div class="name">arrow-left-bold</div>
<div class="code-name">#icon-arrow-left-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-up-bold"></use>
</svg>
<div class="name">arrow-up-bold</div>
<div class="code-name">#icon-arrow-up-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close-bold"></use>
</svg>
<div class="name">close-bold</div>
<div class="code-name">#icon-close-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-down-bold"></use>
</svg>
<div class="name">arrow-down-bold</div>
<div class="code-name">#icon-arrow-down-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-minus-bold"></use>
</svg>
<div class="name">minus-bold</div>
<div class="code-name">#icon-minus-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right-bold"></use>
</svg>
<div class="name">arrow-right-bold</div>
<div class="code-name">#icon-arrow-right-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-select-bold"></use>
</svg>
<div class="name">select-bold</div>
<div class="code-name">#icon-select-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-up-filling"></use>
</svg>
<div class="name">arrow-up-filling</div>
<div class="code-name">#icon-arrow-up-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-down-filling"></use>
</svg>
<div class="name">arrow-down-filling</div>
<div class="code-name">#icon-arrow-down-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left-filling"></use>
</svg>
<div class="name">arrow-left-filling</div>
<div class="code-name">#icon-arrow-left-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right-filling"></use>
</svg>
<div class="name">arrow-right-filling</div>
<div class="code-name">#icon-arrow-right-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caps-unlock-filling"></use>
</svg>
<div class="name">caps-unlock-filling</div>
<div class="code-name">#icon-caps-unlock-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-comment-filling"></use>
</svg>
<div class="name">comment-filling</div>
<div class="code-name">#icon-comment-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-check-item-filling"></use>
</svg>
<div class="name">check-item-filling</div>
<div class="code-name">#icon-check-item-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clock-filling"></use>
</svg>
<div class="name">clock-filling</div>
<div class="code-name">#icon-clock-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-delete-filling"></use>
</svg>
<div class="name">delete-filling</div>
<div class="code-name">#icon-delete-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-decline-filling"></use>
</svg>
<div class="name">decline-filling</div>
<div class="code-name">#icon-decline-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dynamic-filling"></use>
</svg>
<div class="name">dynamic-filling</div>
<div class="code-name">#icon-dynamic-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-intermediate-filling"></use>
</svg>
<div class="name">intermediate-filling</div>
<div class="code-name">#icon-intermediate-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-favorite-filling"></use>
</svg>
<div class="name">favorite-filling</div>
<div class="code-name">#icon-favorite-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-layout-filling"></use>
</svg>
<div class="name">layout-filling</div>
<div class="code-name">#icon-layout-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-help-filling"></use>
</svg>
<div class="name">help-filling</div>
<div class="code-name">#icon-help-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-history-filling"></use>
</svg>
<div class="name">history-filling</div>
<div class="code-name">#icon-history-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-filter-filling"></use>
</svg>
<div class="name">filter-filling</div>
<div class="code-name">#icon-filter-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-file-common-filling"></use>
</svg>
<div class="name">file-common-filling</div>
<div class="code-name">#icon-file-common-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-news-filling"></use>
</svg>
<div class="name">news-filling</div>
<div class="code-name">#icon-news-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit-filling"></use>
</svg>
<div class="name">edit-filling</div>
<div class="code-name">#icon-edit-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fullscreen-expand-filling"></use>
</svg>
<div class="name">fullscreen-expand-filling</div>
<div class="code-name">#icon-fullscreen-expand-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-smile-filling"></use>
</svg>
<div class="name">smile-filling</div>
<div class="code-name">#icon-smile-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-rise-filling"></use>
</svg>
<div class="name">rise-filling</div>
<div class="code-name">#icon-rise-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-picture-filling"></use>
</svg>
<div class="name">picture-filling</div>
<div class="code-name">#icon-picture-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-notification-filling"></use>
</svg>
<div class="name">notification-filling</div>
<div class="code-name">#icon-notification-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-user-filling"></use>
</svg>
<div class="name">user-filling</div>
<div class="code-name">#icon-user-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-setting-filling"></use>
</svg>
<div class="name">setting-filling</div>
<div class="code-name">#icon-setting-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-switch-filling"></use>
</svg>
<div class="name">switch-filling</div>
<div class="code-name">#icon-switch-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-work-filling"></use>
</svg>
<div class="name">work-filling</div>
<div class="code-name">#icon-work-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-task-filling"></use>
</svg>
<div class="name">task-filling</div>
<div class="code-name">#icon-task-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-success-filling"></use>
</svg>
<div class="name">success-filling</div>
<div class="code-name">#icon-success-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-warning-filling"></use>
</svg>
<div class="name">warning-filling</div>
<div class="code-name">#icon-warning-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-folder-filling"></use>
</svg>
<div class="name">folder-filling</div>
<div class="code-name">#icon-folder-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-map-filling"></use>
</svg>
<div class="name">map-filling</div>
<div class="code-name">#icon-map-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-prompt-filling"></use>
</svg>
<div class="name">prompt-filling</div>
<div class="code-name">#icon-prompt-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-meh-filling"></use>
</svg>
<div class="name">meh-filling</div>
<div class="code-name">#icon-meh-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cry-filling"></use>
</svg>
<div class="name">cry-filling</div>
<div class="code-name">#icon-cry-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-top-filling"></use>
</svg>
<div class="name">top-filling</div>
<div class="code-name">#icon-top-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home-filling"></use>
</svg>
<div class="name">home-filling</div>
<div class="code-name">#icon-home-filling</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sorting"></use>
</svg>
<div class="name">sorting</div>
<div class="code-name">#icon-sorting</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink