@58fe/p5
Version:
pc端vue组件
1,462 lines (1,221 loc) • 118 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IconFont</title>
<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>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont icon-sanjiao2"></i>
<div class="name">三角2</div>
<div class="fontclass">.icon-sanjiao2</div>
</li>
<li>
<i class="icon iconfont icon-sanjiao1"></i>
<div class="name">三角1</div>
<div class="fontclass">.icon-sanjiao1</div>
</li>
<li>
<i class="icon iconfont icon-sanjiao4"></i>
<div class="name">三角4</div>
<div class="fontclass">.icon-sanjiao4</div>
</li>
<li>
<i class="icon iconfont icon-sanjiao3"></i>
<div class="name">三角3</div>
<div class="fontclass">.icon-sanjiao3</div>
</li>
<li>
<i class="icon iconfont icon-top"></i>
<div class="name">top</div>
<div class="fontclass">.icon-top</div>
</li>
<li>
<i class="icon iconfont icon-down"></i>
<div class="name">down</div>
<div class="fontclass">.icon-down</div>
</li>
<li>
<i class="icon iconfont icon-right"></i>
<div class="name">right</div>
<div class="fontclass">.icon-right</div>
</li>
<li>
<i class="icon iconfont icon-left"></i>
<div class="name">left</div>
<div class="fontclass">.icon-left</div>
</li>
<li>
<i class="icon iconfont icon-shanchu"></i>
<div class="name">删除</div>
<div class="fontclass">.icon-shanchu</div>
</li>
<li>
<i class="icon iconfont icon-check-circle"></i>
<div class="name">check-circle</div>
<div class="fontclass">.icon-check-circle</div>
</li>
<li>
<i class="icon iconfont icon-CI"></i>
<div class="name">CI</div>
<div class="fontclass">.icon-CI</div>
</li>
<li>
<i class="icon iconfont icon-Dollar"></i>
<div class="name">Dollar</div>
<div class="fontclass">.icon-Dollar</div>
</li>
<li>
<i class="icon iconfont icon-compass"></i>
<div class="name">compass</div>
<div class="fontclass">.icon-compass</div>
</li>
<li>
<i class="icon iconfont icon-close-circle"></i>
<div class="name">close-circle</div>
<div class="fontclass">.icon-close-circle</div>
</li>
<li>
<i class="icon iconfont icon-frown"></i>
<div class="name">frown</div>
<div class="fontclass">.icon-frown</div>
</li>
<li>
<i class="icon iconfont icon-info-circle"></i>
<div class="name">info-circle</div>
<div class="fontclass">.icon-info-circle</div>
</li>
<li>
<i class="icon iconfont icon-left-circle"></i>
<div class="name">left-circle</div>
<div class="fontclass">.icon-left-circle</div>
</li>
<li>
<i class="icon iconfont icon-down-circle"></i>
<div class="name">down-circle</div>
<div class="fontclass">.icon-down-circle</div>
</li>
<li>
<i class="icon iconfont icon-EURO"></i>
<div class="name">EURO</div>
<div class="fontclass">.icon-EURO</div>
</li>
<li>
<i class="icon iconfont icon-copyright"></i>
<div class="name">copyright</div>
<div class="fontclass">.icon-copyright</div>
</li>
<li>
<i class="icon iconfont icon-minus-circle"></i>
<div class="name">minus-circle</div>
<div class="fontclass">.icon-minus-circle</div>
</li>
<li>
<i class="icon iconfont icon-meh"></i>
<div class="name">meh</div>
<div class="fontclass">.icon-meh</div>
</li>
<li>
<i class="icon iconfont icon-plus-circle"></i>
<div class="name">plus-circle</div>
<div class="fontclass">.icon-plus-circle</div>
</li>
<li>
<i class="icon iconfont icon-play-circle"></i>
<div class="name">play-circle</div>
<div class="fontclass">.icon-play-circle</div>
</li>
<li>
<i class="icon iconfont icon-question-circle"></i>
<div class="name">question-circle</div>
<div class="fontclass">.icon-question-circle</div>
</li>
<li>
<i class="icon iconfont icon-Pound"></i>
<div class="name">Pound</div>
<div class="fontclass">.icon-Pound</div>
</li>
<li>
<i class="icon iconfont icon-right-circle"></i>
<div class="name">right-circle</div>
<div class="fontclass">.icon-right-circle</div>
</li>
<li>
<i class="icon iconfont icon-smile"></i>
<div class="name">smile</div>
<div class="fontclass">.icon-smile</div>
</li>
<li>
<i class="icon iconfont icon-trademark"></i>
<div class="name">trademark</div>
<div class="fontclass">.icon-trademark</div>
</li>
<li>
<i class="icon iconfont icon-time-circle"></i>
<div class="name">time-circle</div>
<div class="fontclass">.icon-time-circle</div>
</li>
<li>
<i class="icon iconfont icon-timeout"></i>
<div class="name">time out</div>
<div class="fontclass">.icon-timeout</div>
</li>
<li>
<i class="icon iconfont icon-earth"></i>
<div class="name">earth</div>
<div class="fontclass">.icon-earth</div>
</li>
<li>
<i class="icon iconfont icon-YUAN"></i>
<div class="name">YUAN</div>
<div class="fontclass">.icon-YUAN</div>
</li>
<li>
<i class="icon iconfont icon-up-circle"></i>
<div class="name">up-circle</div>
<div class="fontclass">.icon-up-circle</div>
</li>
<li>
<i class="icon iconfont icon-warning-circle"></i>
<div class="name">warning-circle</div>
<div class="fontclass">.icon-warning-circle</div>
</li>
<li>
<i class="icon iconfont icon-sync"></i>
<div class="name">sync</div>
<div class="fontclass">.icon-sync</div>
</li>
<li>
<i class="icon iconfont icon-transaction"></i>
<div class="name">transaction</div>
<div class="fontclass">.icon-transaction</div>
</li>
<li>
<i class="icon iconfont icon-undo"></i>
<div class="name">undo</div>
<div class="fontclass">.icon-undo</div>
</li>
<li>
<i class="icon iconfont icon-redo"></i>
<div class="name">redo</div>
<div class="fontclass">.icon-redo</div>
</li>
<li>
<i class="icon iconfont icon-reload"></i>
<div class="name">reload</div>
<div class="fontclass">.icon-reload</div>
</li>
<li>
<i class="icon iconfont icon-reloadtime"></i>
<div class="name">reload time</div>
<div class="fontclass">.icon-reloadtime</div>
</li>
<li>
<i class="icon iconfont icon-message"></i>
<div class="name">message</div>
<div class="fontclass">.icon-message</div>
</li>
<li>
<i class="icon iconfont icon-dashboard"></i>
<div class="name">dashboard</div>
<div class="fontclass">.icon-dashboard</div>
</li>
<li>
<i class="icon iconfont icon-issuesclose"></i>
<div class="name">issues close</div>
<div class="fontclass">.icon-issuesclose</div>
</li>
<li>
<i class="icon iconfont icon-poweroff"></i>
<div class="name">poweroff</div>
<div class="fontclass">.icon-poweroff</div>
</li>
<li>
<i class="icon iconfont icon-logout"></i>
<div class="name">logout</div>
<div class="fontclass">.icon-logout</div>
</li>
<li>
<i class="icon iconfont icon-login"></i>
<div class="name">login</div>
<div class="fontclass">.icon-login</div>
</li>
<li>
<i class="icon iconfont icon-piechart"></i>
<div class="name">pie chart</div>
<div class="fontclass">.icon-piechart</div>
</li>
<li>
<i class="icon iconfont icon-setting"></i>
<div class="name">setting</div>
<div class="fontclass">.icon-setting</div>
</li>
<li>
<i class="icon iconfont icon-eye"></i>
<div class="name">eye</div>
<div class="fontclass">.icon-eye</div>
</li>
<li>
<i class="icon iconfont icon-location"></i>
<div class="name">location</div>
<div class="fontclass">.icon-location</div>
</li>
<li>
<i class="icon iconfont icon-edit-square"></i>
<div class="name">edit-square</div>
<div class="fontclass">.icon-edit-square</div>
</li>
<li>
<i class="icon iconfont icon-export"></i>
<div class="name">export</div>
<div class="fontclass">.icon-export</div>
</li>
<li>
<i class="icon iconfont icon-save"></i>
<div class="name">save</div>
<div class="fontclass">.icon-save</div>
</li>
<li>
<i class="icon iconfont icon-Import"></i>
<div class="name">Import</div>
<div class="fontclass">.icon-Import</div>
</li>
<li>
<i class="icon iconfont icon-appstore"></i>
<div class="name">app store</div>
<div class="fontclass">.icon-appstore</div>
</li>
<li>
<i class="icon iconfont icon-close-square"></i>
<div class="name">close-square</div>
<div class="fontclass">.icon-close-square</div>
</li>
<li>
<i class="icon iconfont icon-down-square"></i>
<div class="name">down-square</div>
<div class="fontclass">.icon-down-square</div>
</li>
<li>
<i class="icon iconfont icon-layout"></i>
<div class="name">layout</div>
<div class="fontclass">.icon-layout</div>
</li>
<li>
<i class="icon iconfont icon-left-square"></i>
<div class="name">left-square</div>
<div class="fontclass">.icon-left-square</div>
</li>
<li>
<i class="icon iconfont icon-play-square"></i>
<div class="name">play-square</div>
<div class="fontclass">.icon-play-square</div>
</li>
<li>
<i class="icon iconfont icon-control"></i>
<div class="name">control</div>
<div class="fontclass">.icon-control</div>
</li>
<li>
<i class="icon iconfont icon-codelibrary"></i>
<div class="name">code library</div>
<div class="fontclass">.icon-codelibrary</div>
</li>
<li>
<i class="icon iconfont icon-detail"></i>
<div class="name">detail</div>
<div class="fontclass">.icon-detail</div>
</li>
<li>
<i class="icon iconfont icon-minus-square"></i>
<div class="name">minus-square</div>
<div class="fontclass">.icon-minus-square</div>
</li>
<li>
<i class="icon iconfont icon-plus-square"></i>
<div class="name">plus-square</div>
<div class="fontclass">.icon-plus-square</div>
</li>
<li>
<i class="icon iconfont icon-right-square"></i>
<div class="name">right-square</div>
<div class="fontclass">.icon-right-square</div>
</li>
<li>
<i class="icon iconfont icon-project"></i>
<div class="name">project</div>
<div class="fontclass">.icon-project</div>
</li>
<li>
<i class="icon iconfont icon-wallet"></i>
<div class="name">wallet</div>
<div class="fontclass">.icon-wallet</div>
</li>
<li>
<i class="icon iconfont icon-up-square"></i>
<div class="name">up-square</div>
<div class="fontclass">.icon-up-square</div>
</li>
<li>
<i class="icon iconfont icon-calculator"></i>
<div class="name">calculator</div>
<div class="fontclass">.icon-calculator</div>
</li>
<li>
<i class="icon iconfont icon-interation"></i>
<div class="name">interation</div>
<div class="fontclass">.icon-interation</div>
</li>
<li>
<i class="icon iconfont icon-check-square"></i>
<div class="name">check-square</div>
<div class="fontclass">.icon-check-square</div>
</li>
<li>
<i class="icon iconfont icon-border"></i>
<div class="name">border</div>
<div class="fontclass">.icon-border</div>
</li>
<li>
<i class="icon iconfont icon-border-outer"></i>
<div class="name">border-outer</div>
<div class="fontclass">.icon-border-outer</div>
</li>
<li>
<i class="icon iconfont icon-border-top"></i>
<div class="name">border-top</div>
<div class="fontclass">.icon-border-top</div>
</li>
<li>
<i class="icon iconfont icon-border-bottom"></i>
<div class="name">border-bottom</div>
<div class="fontclass">.icon-border-bottom</div>
</li>
<li>
<i class="icon iconfont icon-border-left"></i>
<div class="name">border-left</div>
<div class="fontclass">.icon-border-left</div>
</li>
<li>
<i class="icon iconfont icon-border-right"></i>
<div class="name">border-right</div>
<div class="fontclass">.icon-border-right</div>
</li>
<li>
<i class="icon iconfont icon-border-inner"></i>
<div class="name">border-inner</div>
<div class="fontclass">.icon-border-inner</div>
</li>
<li>
<i class="icon iconfont icon-border-verticle"></i>
<div class="name">border-verticle</div>
<div class="fontclass">.icon-border-verticle</div>
</li>
<li>
<i class="icon iconfont icon-border-horizontal"></i>
<div class="name">border-horizontal</div>
<div class="fontclass">.icon-border-horizontal</div>
</li>
<li>
<i class="icon iconfont icon-radius-bottomleft"></i>
<div class="name">radius-bottomleft</div>
<div class="fontclass">.icon-radius-bottomleft</div>
</li>
<li>
<i class="icon iconfont icon-radius-bottomright"></i>
<div class="name">radius-bottomright</div>
<div class="fontclass">.icon-radius-bottomright</div>
</li>
<li>
<i class="icon iconfont icon-radius-upleft"></i>
<div class="name">radius-upleft</div>
<div class="fontclass">.icon-radius-upleft</div>
</li>
<li>
<i class="icon iconfont icon-radius-upright"></i>
<div class="name">radius-upright</div>
<div class="fontclass">.icon-radius-upright</div>
</li>
<li>
<i class="icon iconfont icon-radius-setting"></i>
<div class="name">radius-setting</div>
<div class="fontclass">.icon-radius-setting</div>
</li>
<li>
<i class="icon iconfont icon-adduser"></i>
<div class="name">add user</div>
<div class="fontclass">.icon-adduser</div>
</li>
<li>
<i class="icon iconfont icon-deleteteam"></i>
<div class="name">delete team</div>
<div class="fontclass">.icon-deleteteam</div>
</li>
<li>
<i class="icon iconfont icon-deleteuser"></i>
<div class="name">delete user</div>
<div class="fontclass">.icon-deleteuser</div>
</li>
<li>
<i class="icon iconfont icon-addteam"></i>
<div class="name">addteam</div>
<div class="fontclass">.icon-addteam</div>
</li>
<li>
<i class="icon iconfont icon-user"></i>
<div class="name">user</div>
<div class="fontclass">.icon-user</div>
</li>
<li>
<i class="icon iconfont icon-team"></i>
<div class="name">team</div>
<div class="fontclass">.icon-team</div>
</li>
<li>
<i class="icon iconfont icon-areachart"></i>
<div class="name">area chart</div>
<div class="fontclass">.icon-areachart</div>
</li>
<li>
<i class="icon iconfont icon-linechart"></i>
<div class="name">line chart</div>
<div class="fontclass">.icon-linechart</div>
</li>
<li>
<i class="icon iconfont icon-barchart"></i>
<div class="name">bar chart</div>
<div class="fontclass">.icon-barchart</div>
</li>
<li>
<i class="icon iconfont icon-pointmap"></i>
<div class="name">point map</div>
<div class="fontclass">.icon-pointmap</div>
</li>
<li>
<i class="icon iconfont icon-container"></i>
<div class="name">container</div>
<div class="fontclass">.icon-container</div>
</li>
<li>
<i class="icon iconfont icon-database"></i>
<div class="name">database</div>
<div class="fontclass">.icon-database</div>
</li>
<li>
<i class="icon iconfont icon-sever"></i>
<div class="name">sever</div>
<div class="fontclass">.icon-sever</div>
</li>
<li>
<i class="icon iconfont icon-mobile"></i>
<div class="name">mobile</div>
<div class="fontclass">.icon-mobile</div>
</li>
<li>
<i class="icon iconfont icon-tablet"></i>
<div class="name">tablet</div>
<div class="fontclass">.icon-tablet</div>
</li>
<li>
<i class="icon iconfont icon-redenvelope"></i>
<div class="name">red envelope</div>
<div class="fontclass">.icon-redenvelope</div>
</li>
<li>
<i class="icon iconfont icon-book"></i>
<div class="name">book</div>
<div class="fontclass">.icon-book</div>
</li>
<li>
<i class="icon iconfont icon-filedone"></i>
<div class="name">file done</div>
<div class="fontclass">.icon-filedone</div>
</li>
<li>
<i class="icon iconfont icon-reconciliation"></i>
<div class="name">reconciliation</div>
<div class="fontclass">.icon-reconciliation</div>
</li>
<li>
<i class="icon iconfont icon-file-exception"></i>
<div class="name">file -exception</div>
<div class="fontclass">.icon-file-exception</div>
</li>
<li>
<i class="icon iconfont icon-filesync"></i>
<div class="name">file sync</div>
<div class="fontclass">.icon-filesync</div>
</li>
<li>
<i class="icon iconfont icon-filesearch"></i>
<div class="name">file search</div>
<div class="fontclass">.icon-filesearch</div>
</li>
<li>
<i class="icon iconfont icon-solution"></i>
<div class="name">solution</div>
<div class="fontclass">.icon-solution</div>
</li>
<li>
<i class="icon iconfont icon-fileprotect"></i>
<div class="name">file protect</div>
<div class="fontclass">.icon-fileprotect</div>
</li>
<li>
<i class="icon iconfont icon-file-add"></i>
<div class="name">file-add</div>
<div class="fontclass">.icon-file-add</div>
</li>
<li>
<i class="icon iconfont icon-file-excel"></i>
<div class="name">file-excel</div>
<div class="fontclass">.icon-file-excel</div>
</li>
<li>
<i class="icon iconfont icon-file-exclamation"></i>
<div class="name">file-exclamation</div>
<div class="fontclass">.icon-file-exclamation</div>
</li>
<li>
<i class="icon iconfont icon-file-pdf"></i>
<div class="name">file-pdf</div>
<div class="fontclass">.icon-file-pdf</div>
</li>
<li>
<i class="icon iconfont icon-file-image"></i>
<div class="name">file-image</div>
<div class="fontclass">.icon-file-image</div>
</li>
<li>
<i class="icon iconfont icon-file-markdown"></i>
<div class="name">file-markdown</div>
<div class="fontclass">.icon-file-markdown</div>
</li>
<li>
<i class="icon iconfont icon-file-unknown"></i>
<div class="name">file-unknown</div>
<div class="fontclass">.icon-file-unknown</div>
</li>
<li>
<i class="icon iconfont icon-file-ppt"></i>
<div class="name">file-ppt</div>
<div class="fontclass">.icon-file-ppt</div>
</li>
<li>
<i class="icon iconfont icon-file-word"></i>
<div class="name">file-word</div>
<div class="fontclass">.icon-file-word</div>
</li>
<li>
<i class="icon iconfont icon-file"></i>
<div class="name">file</div>
<div class="fontclass">.icon-file</div>
</li>
<li>
<i class="icon iconfont icon-file-zip"></i>
<div class="name">file-zip</div>
<div class="fontclass">.icon-file-zip</div>
</li>
<li>
<i class="icon iconfont icon-file-text"></i>
<div class="name">file-text</div>
<div class="fontclass">.icon-file-text</div>
</li>
<li>
<i class="icon iconfont icon-file-copy"></i>
<div class="name">file-copy</div>
<div class="fontclass">.icon-file-copy</div>
</li>
<li>
<i class="icon iconfont icon-snippets"></i>
<div class="name">snippets</div>
<div class="fontclass">.icon-snippets</div>
</li>
<li>
<i class="icon iconfont icon-audit"></i>
<div class="name">audit</div>
<div class="fontclass">.icon-audit</div>
</li>
<li>
<i class="icon iconfont icon-diff"></i>
<div class="name">diff</div>
<div class="fontclass">.icon-diff</div>
</li>
<li>
<i class="icon iconfont icon-Batchfolding"></i>
<div class="name">Batch folding</div>
<div class="fontclass">.icon-Batchfolding</div>
</li>
<li>
<i class="icon iconfont icon-securityscan"></i>
<div class="name">security scan</div>
<div class="fontclass">.icon-securityscan</div>
</li>
<li>
<i class="icon iconfont icon-propertysafety"></i>
<div class="name">property safety</div>
<div class="fontclass">.icon-propertysafety</div>
</li>
<li>
<i class="icon iconfont icon-safetycertificate"></i>
<div class="name">safety certificate</div>
<div class="fontclass">.icon-safetycertificate</div>
</li>
<li>
<i class="icon iconfont icon-insurance"></i>
<div class="name">insurance </div>
<div class="fontclass">.icon-insurance</div>
</li>
<li>
<i class="icon iconfont icon-alert"></i>
<div class="name">alert</div>
<div class="fontclass">.icon-alert</div>
</li>
<li>
<i class="icon iconfont icon-delete"></i>
<div class="name">delete</div>
<div class="fontclass">.icon-delete</div>
</li>
<li>
<i class="icon iconfont icon-hourglass"></i>
<div class="name">hourglass</div>
<div class="fontclass">.icon-hourglass</div>
</li>
<li>
<i class="icon iconfont icon-bulb"></i>
<div class="name">bulb</div>
<div class="fontclass">.icon-bulb</div>
</li>
<li>
<i class="icon iconfont icon-experiment"></i>
<div class="name">experiment</div>
<div class="fontclass">.icon-experiment</div>
</li>
<li>
<i class="icon iconfont icon-bell"></i>
<div class="name">bell</div>
<div class="fontclass">.icon-bell</div>
</li>
<li>
<i class="icon iconfont icon-trophy"></i>
<div class="name">trophy</div>
<div class="fontclass">.icon-trophy</div>
</li>
<li>
<i class="icon iconfont icon-rest"></i>
<div class="name">rest</div>
<div class="fontclass">.icon-rest</div>
</li>
<li>
<i class="icon iconfont icon-USB"></i>
<div class="name">USB</div>
<div class="fontclass">.icon-USB</div>
</li>
<li>
<i class="icon iconfont icon-skin"></i>
<div class="name">skin</div>
<div class="fontclass">.icon-skin</div>
</li>
<li>
<i class="icon iconfont icon-home"></i>
<div class="name">home</div>
<div class="fontclass">.icon-home</div>
</li>
<li>
<i class="icon iconfont icon-bank"></i>
<div class="name">bank</div>
<div class="fontclass">.icon-bank</div>
</li>
<li>
<i class="icon iconfont icon-filter"></i>
<div class="name">filter</div>
<div class="fontclass">.icon-filter</div>
</li>
<li>
<i class="icon iconfont icon-funnelplot"></i>
<div class="name">funnel plot</div>
<div class="fontclass">.icon-funnelplot</div>
</li>
<li>
<i class="icon iconfont icon-like"></i>
<div class="name">like</div>
<div class="fontclass">.icon-like</div>
</li>
<li>
<i class="icon iconfont icon-unlike"></i>
<div class="name">unlike</div>
<div class="fontclass">.icon-unlike</div>
</li>
<li>
<i class="icon iconfont icon-unlock"></i>
<div class="name">unlock</div>
<div class="fontclass">.icon-unlock</div>
</li>
<li>
<i class="icon iconfont icon-lock"></i>
<div class="name">lock</div>
<div class="fontclass">.icon-lock</div>
</li>
<li>
<i class="icon iconfont icon-customerservice"></i>
<div class="name">customerservice</div>
<div class="fontclass">.icon-customerservice</div>
</li>
<li>
<i class="icon iconfont icon-flag"></i>
<div class="name">flag</div>
<div class="fontclass">.icon-flag</div>
</li>
<li>
<i class="icon iconfont icon-moneycollect"></i>
<div class="name">money collect</div>
<div class="fontclass">.icon-moneycollect</div>
</li>
<li>
<i class="icon iconfont icon-medicinebox"></i>
<div class="name">medicinebox</div>
<div class="fontclass">.icon-medicinebox</div>
</li>
<li>
<i class="icon iconfont icon-shop"></i>
<div class="name">shop</div>
<div class="fontclass">.icon-shop</div>
</li>
<li>
<i class="icon iconfont icon-rocket"></i>
<div class="name">rocket</div>
<div class="fontclass">.icon-rocket</div>
</li>
<li>
<i class="icon iconfont icon-shopping"></i>
<div class="name">shopping</div>
<div class="fontclass">.icon-shopping</div>
</li>
<li>
<i class="icon iconfont icon-folder"></i>
<div class="name">folder</div>
<div class="fontclass">.icon-folder</div>
</li>
<li>
<i class="icon iconfont icon-folder-open"></i>
<div class="name">folder-open</div>
<div class="fontclass">.icon-folder-open</div>
</li>
<li>
<i class="icon iconfont icon-folder-add"></i>
<div class="name">folder-add</div>
<div class="fontclass">.icon-folder-add</div>
</li>
<li>
<i class="icon iconfont icon-deploymentunit"></i>
<div class="name">deployment unit</div>
<div class="fontclass">.icon-deploymentunit</div>
</li>
<li>
<i class="icon iconfont icon-accountbook"></i>
<div class="name">account book</div>
<div class="fontclass">.icon-accountbook</div>
</li>
<li>
<i class="icon iconfont icon-contacts"></i>
<div class="name">contacts</div>
<div class="fontclass">.icon-contacts</div>
</li>
<li>
<i class="icon iconfont icon-carryout"></i>
<div class="name">carry out</div>
<div class="fontclass">.icon-carryout</div>
</li>
<li>
<i class="icon iconfont icon-calendar-check"></i>
<div class="name">calendar-check</div>
<div class="fontclass">.icon-calendar-check</div>
</li>
<li>
<i class="icon iconfont icon-calendar"></i>
<div class="name">calendar</div>
<div class="fontclass">.icon-calendar</div>
</li>
<li>
<i class="icon iconfont icon-scan"></i>
<div class="name">scan</div>
<div class="fontclass">.icon-scan</div>
</li>
<li>
<i class="icon iconfont icon-select"></i>
<div class="name">select</div>
<div class="fontclass">.icon-select</div>
</li>
<li>
<i class="icon iconfont icon-boxplot"></i>
<div class="name">box plot</div>
<div class="fontclass">.icon-boxplot</div>
</li>
<li>
<i class="icon iconfont icon-build"></i>
<div class="name">build</div>
<div class="fontclass">.icon-build</div>
</li>
<li>
<i class="icon iconfont icon-sliders"></i>
<div class="name">sliders</div>
<div class="fontclass">.icon-sliders</div>
</li>
<li>
<i class="icon iconfont icon-laptop"></i>
<div class="name">laptop</div>
<div class="fontclass">.icon-laptop</div>
</li>
<li>
<i class="icon iconfont icon-barcode"></i>
<div class="name">barcode</div>
<div class="fontclass">.icon-barcode</div>
</li>
<li>
<i class="icon iconfont icon-camera"></i>
<div class="name">camera</div>
<div class="fontclass">.icon-camera</div>
</li>
<li>
<i class="icon iconfont icon-cluster"></i>
<div class="name">cluster</div>
<div class="fontclass">.icon-cluster</div>
</li>
<li>
<i class="icon iconfont icon-gateway"></i>
<div class="name">gateway</div>
<div class="fontclass">.icon-gateway</div>
</li>
<li>
<i class="icon iconfont icon-car"></i>
<div class="name">car</div>
<div class="fontclass">.icon-car</div>
</li>
<li>
<i class="icon iconfont icon-printer"></i>
<div class="name">printer</div>
<div class="fontclass">.icon-printer</div>
</li>
<li>
<i class="icon iconfont icon-read"></i>
<div class="name">read</div>
<div class="fontclass">.icon-read</div>
</li>
<li>
<i class="icon iconfont icon-cloud-server"></i>
<div class="name">cloud-server</div>
<div class="fontclass">.icon-cloud-server</div>
</li>
<li>
<i class="icon iconfont icon-cloud-upload"></i>
<div class="name">cloud-upload</div>
<div class="fontclass">.icon-cloud-upload</div>
</li>
<li>
<i class="icon iconfont icon-cloud"></i>
<div class="name">cloud</div>
<div class="fontclass">.icon-cloud</div>
</li>
<li>
<i class="icon iconfont icon-cloud-download"></i>
<div class="name">cloud-download</div>
<div class="fontclass">.icon-cloud-download</div>
</li>
<li>
<i class="icon iconfont icon-cloud-sync"></i>
<div class="name">cloud-sync</div>
<div class="fontclass">.icon-cloud-sync</div>
</li>
<li>
<i class="icon iconfont icon-video"></i>
<div class="name">video</div>
<div class="fontclass">.icon-video</div>
</li>
<li>
<i class="icon iconfont icon-notification"></i>
<div class="name">notification</div>
<div class="fontclass">.icon-notification</div>
</li>
<li>
<i class="icon iconfont icon-sound"></i>
<div class="name">sound</div>
<div class="fontclass">.icon-sound</div>
</li>
<li>
<i class="icon iconfont icon-radarchart"></i>
<div class="name">radar chart</div>
<div class="fontclass">.icon-radarchart</div>
</li>
<li>
<i class="icon iconfont icon-qrcode"></i>
<div class="name">qrcode</div>
<div class="fontclass">.icon-qrcode</div>
</li>
<li>
<i class="icon iconfont icon-fund"></i>
<div class="name">fund</div>
<div class="fontclass">.icon-fund</div>
</li>
<li>
<i class="icon iconfont icon-image"></i>
<div class="name">image</div>
<div class="fontclass">.icon-image</div>
</li>
<li>
<i class="icon iconfont icon-mail"></i>
<div class="name">mail</div>
<div class="fontclass">.icon-mail</div>
</li>
<li>
<i class="icon iconfont icon-table"></i>
<div class="name">table</div>
<div class="fontclass">.icon-table</div>
</li>
<li>
<i class="icon iconfont icon-idcard"></i>
<div class="name">id card</div>
<div class="fontclass">.icon-idcard</div>
</li>
<li>
<i class="icon iconfont icon-creditcard"></i>
<div class="name">credit card</div>
<div class="fontclass">.icon-creditcard</div>
</li>
<li>
<i class="icon iconfont icon-heart"></i>
<div class="name">heart</div>
<div class="fontclass">.icon-heart</div>
</li>
<li>
<i class="icon iconfont icon-block"></i>
<div class="name">block</div>
<div class="fontclass">.icon-block</div>
</li>
<li>
<i class="icon iconfont icon-error"></i>
<div class="name">error</div>
<div class="fontclass">.icon-error</div>
</li>
<li>
<i class="icon iconfont icon-star"></i>
<div class="name">star</div>
<div class="fontclass">.icon-star</div>
</li>
<li>
<i class="icon iconfont icon-gold"></i>
<div class="name">gold</div>
<div class="fontclass">.icon-gold</div>
</li>
<li>
<i class="icon iconfont icon-heatmap"></i>
<div class="name">heat map</div>
<div class="fontclass">.icon-heatmap</div>
</li>
<li>
<i class="icon iconfont icon-wifi"></i>
<div class="name">wifi</div>
<div class="fontclass">.icon-wifi</div>
</li>
<li>
<i class="icon iconfont icon-attachment"></i>
<div class="name">attachment</div>
<div class="fontclass">.icon-attachment</div>
</li>
<li>
<i class="icon iconfont icon-edit"></i>
<div class="name">edit</div>
<div class="fontclass">.icon-edit</div>
</li>
<li>
<i class="icon iconfont icon-key"></i>
<div class="name">key</div>
<div class="fontclass">.icon-key</div>
</li>
<li>
<i class="icon iconfont icon-api"></i>
<div class="name">api</div>
<div class="fontclass">.icon-api</div>
</li>
<li>
<i class="icon iconfont icon-disconnect"></i>
<div class="name">disconnect</div>
<div class="fontclass">.icon-disconnect</div>
</li>
<li>
<i class="icon iconfont icon-highlight"></i>
<div class="name">highlight</div>
<div class="fontclass">.icon-highlight</div>
</li>
<li>
<i class="icon iconfont icon-monitor"></i>
<div class="name">monitor</div>
<div class="fontclass">.icon-monitor</div>
</li>
<li>
<i class="icon iconfont icon-link"></i>
<div class="name">link</div>
<div class="fontclass">.icon-link</div>
</li>
<li>
<i class="icon iconfont icon-man"></i>
<div class="name">man</div>
<div class="fontclass">.icon-man</div>
</li>
<li>
<i class="icon iconfont icon-percentage"></i>
<div class="name">percentage</div>
<div class="fontclass">.icon-percentage</div>
</li>
<li>
<i class="icon iconfont icon-search"></i>
<div class="name">search</div>
<div class="fontclass">.icon-search</div>
</li>
<li>
<i class="icon iconfont icon-pushpin"></i>
<div class="name">pushpin</div>
<div class="fontclass">.icon-pushpin</div>
</li>
<li>
<i class="icon iconfont icon-phone"></i>
<div class="name">phone</div>
<div class="fontclass">.icon-phone</div>
</li>
<li>
<i class="icon iconfont icon-shake"></i>
<div class="name">shake</div>
<div class="fontclass">.icon-shake</div>
</li>
<li>
<i class="icon iconfont icon-tag"></i>
<div class="name">tag</div>
<div class="fontclass">.icon-tag</div>
</li>
<li>
<i class="icon iconfont icon-wrench"></i>
<div class="name">wrench</div>
<div class="fontclass">.icon-wrench</div>
</li>
<li>
<i class="icon iconfont icon-woman"></i>
<div class="name">woman</div>
<div class="fontclass">.icon-woman</div>
</li>
<li>
<i class="icon iconfont icon-tags"></i>
<div class="name">tags</div>
<div class="fontclass">.icon-tags</div>
</li>
<li>
<i class="icon iconfont icon-scissor"></i>
<div class="name">scissor</div>
<div class="fontclass">.icon-scissor</div>
</li>
<li>
<i class="icon iconfont icon-mr"></i>
<div class="name">mr</div>
<div class="fontclass">.icon-mr</div>
</li>
<li>
<i class="icon iconfont icon-share"></i>
<div class="name">share</div>
<div class="fontclass">.icon-share</div>
</li>
<li>
<i class="icon iconfont icon-branches"></i>
<div class="name">branches</div>
<div class="fontclass">.icon-branches</div>
</li>
<li>
<i class="icon iconfont icon-fork"></i>
<div class="name">fork</div>
<div class="fontclass">.icon-fork</div>
</li>
<li>
<i class="icon iconfont icon-shrink"></i>
<div class="name">shrink</div>
<div class="fontclass">.icon-shrink</div>
</li>
<li>
<i class="icon iconfont icon-arrawsalt"></i>
<div class="name">arrawsalt</div>
<div class="fontclass">.icon-arrawsalt</div>
</li>
<li>
<i class="icon iconfont icon-verticalright"></i>
<div class="name">vertical right</div>
<div class="fontclass">.icon-verticalright</div>
</li>
<li>
<i class="icon iconfont icon-verticalleft"></i>
<div class="name">vertical left</div>
<div class="fontclass">.icon-verticalleft</div>
</li>
<li>
<i class="icon iconfont icon-right1"></i>
<div class="name">right</div>
<div class="fontclass">.icon-right1</div>
</li>
<li>
<i class="icon iconfont icon-left1"></i>
<div class="name">left</div>
<div class="fontclass">.icon-left1</div>
</li>
<li>
<i class="icon iconfont icon-up"></i>
<div class="name">up</div>
<div class="fontclass">.icon-up</div>
</li>
<li>
<i class="icon iconfont icon-down1"></i>
<div class="name">down</div>
<div class="fontclass">.icon-down1</div>
</li>
<li>
<i class="icon iconfont icon-fullscreen"></i>
<div class="name">fullscreen</div>
<div class="fontclass">.icon-fullscreen</div>
</li>
<li>
<i class="icon iconfont icon-fullscreen-exit"></i>
<div class="name">fullscreen-exit</div>
<div class="fontclass">.icon-fullscreen-exit</div>
</li>
<li>
<i class="icon iconfont icon-doubleleft"></i>
<div class="name">doubleleft</div>
<div class="fontclass">.icon-doubleleft</div>
</li>
<li>
<i class="icon iconfont icon-doubleright"></i>
<div class="name">double right</div>