@58fe/p5
Version:
pc端vue组件
1,558 lines (1,300 loc) • 109 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<style type="text/css">
/* Ant Design 官方图标库
* http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402
*/
@font-face {
font-family: "iconfont";
src: url('http://img.58cdn.com.cn/webfonts/resume/p5-iconfontt.eot');
/* IE9*/
src: url('http://img.58cdn.com.cn/webfonts/resume/p5-iconfont.eot#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('http://img.58cdn.com.cn/webfonts/resume/p5-iconfontt.woff') format('woff'),
/* chrome, firefox */
url('http://img.58cdn.com.cn/webfonts/resume/p5-iconfont.ttf?v=1') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('http://img.58cdn.com.cn/webfonts/resume/p5-iconfont.svg#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont">󰄡</i>
<div class="name">三角2</div>
<div class="code">&#xf0121;</div>
</li>
<li>
<i class="icon iconfont">󰄢</i>
<div class="name">三角1</div>
<div class="code">&#xf0122;</div>
</li>
<li>
<i class="icon iconfont">󰄣</i>
<div class="name">三角4</div>
<div class="code">&#xf0123;</div>
</li>
<li>
<i class="icon iconfont">󰄤</i>
<div class="name">三角3</div>
<div class="code">&#xf0124;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">top</div>
<div class="code">&#xe663;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">down</div>
<div class="code">&#xe664;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">right</div>
<div class="code">&#xe665;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">left</div>
<div class="code">&#xe666;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">删除</div>
<div class="code">&#xe718;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">check-circle</div>
<div class="code">&#xe77d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">CI</div>
<div class="code">&#xe77e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">Dollar</div>
<div class="code">&#xe77f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">compass</div>
<div class="code">&#xe780;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">close-circle</div>
<div class="code">&#xe781;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">frown</div>
<div class="code">&#xe782;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">info-circle</div>
<div class="code">&#xe783;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">left-circle</div>
<div class="code">&#xe784;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">down-circle</div>
<div class="code">&#xe785;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">EURO</div>
<div class="code">&#xe786;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">copyright</div>
<div class="code">&#xe787;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">minus-circle</div>
<div class="code">&#xe788;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">meh</div>
<div class="code">&#xe789;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">plus-circle</div>
<div class="code">&#xe78a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">play-circle</div>
<div class="code">&#xe78b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">question-circle</div>
<div class="code">&#xe78c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">Pound</div>
<div class="code">&#xe78d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">right-circle</div>
<div class="code">&#xe78e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">smile</div>
<div class="code">&#xe78f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">trademark</div>
<div class="code">&#xe790;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">time-circle</div>
<div class="code">&#xe791;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">time out</div>
<div class="code">&#xe792;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">earth</div>
<div class="code">&#xe793;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">YUAN</div>
<div class="code">&#xe794;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">up-circle</div>
<div class="code">&#xe795;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">warning-circle</div>
<div class="code">&#xe796;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">sync</div>
<div class="code">&#xe797;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">transaction</div>
<div class="code">&#xe798;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">undo</div>
<div class="code">&#xe799;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">redo</div>
<div class="code">&#xe79a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">reload</div>
<div class="code">&#xe79b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">reload time</div>
<div class="code">&#xe79c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">message</div>
<div class="code">&#xe79d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">dashboard</div>
<div class="code">&#xe79e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">issues close</div>
<div class="code">&#xe79f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">poweroff</div>
<div class="code">&#xe7a0;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">logout</div>
<div class="code">&#xe7a1;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">login</div>
<div class="code">&#xe7a2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">pie chart</div>
<div class="code">&#xe7a3;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">setting</div>
<div class="code">&#xe7a4;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">eye</div>
<div class="code">&#xe7a5;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">location</div>
<div class="code">&#xe7a6;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">edit-square</div>
<div class="code">&#xe7a7;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">export</div>
<div class="code">&#xe7a8;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">save</div>
<div class="code">&#xe7a9;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">Import</div>
<div class="code">&#xe7aa;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">app store</div>
<div class="code">&#xe7ab;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">close-square</div>
<div class="code">&#xe7ac;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">down-square</div>
<div class="code">&#xe7ad;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">layout</div>
<div class="code">&#xe7ae;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">left-square</div>
<div class="code">&#xe7af;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">play-square</div>
<div class="code">&#xe7b0;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">control</div>
<div class="code">&#xe7b1;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">code library</div>
<div class="code">&#xe7b2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">detail</div>
<div class="code">&#xe7b3;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">minus-square</div>
<div class="code">&#xe7b4;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">plus-square</div>
<div class="code">&#xe7b5;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">right-square</div>
<div class="code">&#xe7b6;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">project</div>
<div class="code">&#xe7b7;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">wallet</div>
<div class="code">&#xe7b8;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">up-square</div>
<div class="code">&#xe7b9;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">calculator</div>
<div class="code">&#xe7ba;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">interation</div>
<div class="code">&#xe7bb;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">check-square</div>
<div class="code">&#xe7bc;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border</div>
<div class="code">&#xe7bd;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-outer</div>
<div class="code">&#xe7be;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-top</div>
<div class="code">&#xe7bf;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-bottom</div>
<div class="code">&#xe7c0;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-left</div>
<div class="code">&#xe7c1;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-right</div>
<div class="code">&#xe7c2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-inner</div>
<div class="code">&#xe7c3;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-verticle</div>
<div class="code">&#xe7c4;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">border-horizontal</div>
<div class="code">&#xe7c5;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">radius-bottomleft</div>
<div class="code">&#xe7c6;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">radius-bottomright</div>
<div class="code">&#xe7c7;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">radius-upleft</div>
<div class="code">&#xe7c8;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">radius-upright</div>
<div class="code">&#xe7c9;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">radius-setting</div>
<div class="code">&#xe7ca;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">add user</div>
<div class="code">&#xe7cb;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">delete team</div>
<div class="code">&#xe7cc;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">delete user</div>
<div class="code">&#xe7cd;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">addteam</div>
<div class="code">&#xe7ce;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">user</div>
<div class="code">&#xe7cf;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">team</div>
<div class="code">&#xe7d0;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">area chart</div>
<div class="code">&#xe7d1;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">line chart</div>
<div class="code">&#xe7d2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">bar chart</div>
<div class="code">&#xe7d3;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">point map</div>
<div class="code">&#xe7d4;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">container</div>
<div class="code">&#xe7d5;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">database</div>
<div class="code">&#xe7d6;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">sever</div>
<div class="code">&#xe7d7;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">mobile</div>
<div class="code">&#xe7d8;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">tablet</div>
<div class="code">&#xe7d9;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">red envelope</div>
<div class="code">&#xe7da;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">book</div>
<div class="code">&#xe7db;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file done</div>
<div class="code">&#xe7dc;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">reconciliation</div>
<div class="code">&#xe7dd;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file -exception</div>
<div class="code">&#xe7de;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file sync</div>
<div class="code">&#xe7df;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file search</div>
<div class="code">&#xe7e0;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">solution</div>
<div class="code">&#xe7e1;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file protect</div>
<div class="code">&#xe7e2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-add</div>
<div class="code">&#xe7e3;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-excel</div>
<div class="code">&#xe7e4;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-exclamation</div>
<div class="code">&#xe7e5;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-pdf</div>
<div class="code">&#xe7e6;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-image</div>
<div class="code">&#xe7e7;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-markdown</div>
<div class="code">&#xe7e8;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-unknown</div>
<div class="code">&#xe7e9;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-ppt</div>
<div class="code">&#xe7ea;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-word</div>
<div class="code">&#xe7eb;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file</div>
<div class="code">&#xe7ec;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-zip</div>
<div class="code">&#xe7ed;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-text</div>
<div class="code">&#xe7ee;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">file-copy</div>
<div class="code">&#xe7ef;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">snippets</div>
<div class="code">&#xe7f0;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">audit</div>
<div class="code">&#xe7f1;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">diff</div>
<div class="code">&#xe7f2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">Batch folding</div>
<div class="code">&#xe7f3;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">security scan</div>
<div class="code">&#xe7f4;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">property safety</div>
<div class="code">&#xe7f5;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">safety certificate</div>
<div class="code">&#xe7f6;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">insurance </div>
<div class="code">&#xe7f7;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">alert</div>
<div class="code">&#xe7f8;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">delete</div>
<div class="code">&#xe7f9;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">hourglass</div>
<div class="code">&#xe7fa;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">bulb</div>
<div class="code">&#xe7fb;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">experiment</div>
<div class="code">&#xe7fc;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">bell</div>
<div class="code">&#xe7fd;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">trophy</div>
<div class="code">&#xe7fe;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">rest</div>
<div class="code">&#xe7ff;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">USB</div>
<div class="code">&#xe800;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">skin</div>
<div class="code">&#xe801;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">home</div>
<div class="code">&#xe802;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">bank</div>
<div class="code">&#xe803;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">filter</div>
<div class="code">&#xe804;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">funnel plot</div>
<div class="code">&#xe805;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">like</div>
<div class="code">&#xe806;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">unlike</div>
<div class="code">&#xe807;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">unlock</div>
<div class="code">&#xe808;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">lock</div>
<div class="code">&#xe809;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">customerservice</div>
<div class="code">&#xe80a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">flag</div>
<div class="code">&#xe80b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">money collect</div>
<div class="code">&#xe80c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">medicinebox</div>
<div class="code">&#xe80d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">shop</div>
<div class="code">&#xe80e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">rocket</div>
<div class="code">&#xe80f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">shopping</div>
<div class="code">&#xe810;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">folder</div>
<div class="code">&#xe811;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">folder-open</div>
<div class="code">&#xe812;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">folder-add</div>
<div class="code">&#xe813;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">deployment unit</div>
<div class="code">&#xe814;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">account book</div>
<div class="code">&#xe815;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">contacts</div>
<div class="code">&#xe816;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">carry out</div>
<div class="code">&#xe817;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">calendar-check</div>
<div class="code">&#xe818;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">calendar</div>
<div class="code">&#xe819;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">scan</div>
<div class="code">&#xe81a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">select</div>
<div class="code">&#xe81b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">box plot</div>
<div class="code">&#xe81c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">build</div>
<div class="code">&#xe81d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">sliders</div>
<div class="code">&#xe81e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">laptop</div>
<div class="code">&#xe81f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">barcode</div>
<div class="code">&#xe820;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">camera</div>
<div class="code">&#xe821;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">cluster</div>
<div class="code">&#xe822;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">gateway</div>
<div class="code">&#xe823;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">car</div>
<div class="code">&#xe824;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">printer</div>
<div class="code">&#xe825;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">read</div>
<div class="code">&#xe826;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">cloud-server</div>
<div class="code">&#xe827;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">cloud-upload</div>
<div class="code">&#xe828;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">cloud</div>
<div class="code">&#xe829;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">cloud-download</div>
<div class="code">&#xe82a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">cloud-sync</div>
<div class="code">&#xe82b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">video</div>
<div class="code">&#xe82c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">notification</div>
<div class="code">&#xe82d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">sound</div>
<div class="code">&#xe82e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">radar chart</div>
<div class="code">&#xe82f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">qrcode</div>
<div class="code">&#xe830;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">fund</div>
<div class="code">&#xe831;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">image</div>
<div class="code">&#xe832;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">mail</div>
<div class="code">&#xe833;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">table</div>
<div class="code">&#xe834;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">id card</div>
<div class="code">&#xe835;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">credit card</div>
<div class="code">&#xe836;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">heart</div>
<div class="code">&#xe837;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">block</div>
<div class="code">&#xe838;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">error</div>
<div class="code">&#xe839;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">star</div>
<div class="code">&#xe83a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">gold</div>
<div class="code">&#xe83b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">heat map</div>
<div class="code">&#xe83c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">wifi</div>
<div class="code">&#xe83d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">attachment</div>
<div class="code">&#xe83e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">edit</div>
<div class="code">&#xe83f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">key</div>
<div class="code">&#xe840;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">api</div>
<div class="code">&#xe841;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">disconnect</div>
<div class="code">&#xe842;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">highlight</div>
<div class="code">&#xe843;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">monitor</div>
<div class="code">&#xe844;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">link</div>
<div class="code">&#xe845;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">man</div>
<div class="code">&#xe846;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">percentage</div>
<div class="code">&#xe847;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">search</div>
<div class="code">&#xe848;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">pushpin</div>
<div class="code">&#xe849;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">phone</div>
<div class="code">&#xe84a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">shake</div>
<div class="code">&#xe84b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">tag</div>
<div class="code">&#xe84c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">wrench</div>
<div class="code">&#xe84d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">woman</div>
<div class="code">&#xe84e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">tags</div>
<div class="code">&#xe84f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">scissor</div>
<div class="code">&#xe850;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">mr</div>
<div class="code">&#xe851;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">share</div>
<div class="code">&#xe852;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">branches</div>
<div class="code">&#xe853;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">fork</div>
<div class="code">&#xe854;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">shrink</div>
<div class="code">&#xe855;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">arrawsalt</div>
<div class="code">&#xe856;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">vertical right</div>
<div class="code">&#xe857;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">vertical left</div>
<div class="code">&#xe858;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">right</div>
<div class="code">&#xe859;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">left</div>
<div class="code">&#xe85a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">up</div>
<div class="code">&#xe85b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">down</div>
<div class="code">&#xe85c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">fullscreen</div>
<div class="code">&#xe85d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">fullscreen-exit</div>
<div class="code">&#xe85e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">doubleleft</div>
<div class="code">&#xe85f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">double right</div>
<div class="code">&#xe860;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">arrowright</div>
<div class="code">&#xe861;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">arrowup</div>
<div class="code">&#xe862;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">arrowleft</div>
<div class="code">&#xe863;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">arrowdown</div>
<div class="code">&#xe864;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">upload</div>
<div class="code">&#xe865;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">colum-height</div>
<div class="code">&#xe866;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">vertical-align-botto</div>
<div class="code">&#xe867;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">vertical-align-middl</div>
<div class="code">&#xe868;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">totop</div>
<div class="code">&#xe869;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">vertical-align-top</div>
<div class="code">&#xe86a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">download</div>
<div class="code">&#xe86b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">sort-descending</div>
<div class="code">&#xe86c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">sort-ascending</div>
<div class="code">&#xe86d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">fall</div>
<div class="code">&#xe86e;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">swap</div>
<div class="code">&#xe86f;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">stock</div>