mk-component
Version:
- 1、npm install mk-component --save
1,248 lines (1,092 loc) • 94.1 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<script src="iconfont.js"></script>
<style type="text/css">
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-stepforward"></use>
</svg>
<div class="name">stepforward</div>
<div class="fontclass">#icon-stepforward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-stepbackward"></use>
</svg>
<div class="name">stepbackward</div>
<div class="fontclass">#icon-stepbackward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-forward"></use>
</svg>
<div class="name">forward</div>
<div class="fontclass">#icon-forward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-banckward"></use>
</svg>
<div class="name">banckward</div>
<div class="fontclass">#icon-banckward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caretright"></use>
</svg>
<div class="name">caretright</div>
<div class="fontclass">#icon-caretright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caretleft"></use>
</svg>
<div class="name">caretleft</div>
<div class="fontclass">#icon-caretleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caretdown"></use>
</svg>
<div class="name">caretdown</div>
<div class="fontclass">#icon-caretdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caretup"></use>
</svg>
<div class="name">caretup</div>
<div class="fontclass">#icon-caretup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rightcircle"></use>
</svg>
<div class="name">right-circle</div>
<div class="fontclass">#icon-rightcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leftcircle"></use>
</svg>
<div class="name">left-circle</div>
<div class="fontclass">#icon-leftcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-upcircle"></use>
</svg>
<div class="name">up-circle</div>
<div class="fontclass">#icon-upcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-downcircle"></use>
</svg>
<div class="name">down-circle</div>
<div class="fontclass">#icon-downcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rightcircleo"></use>
</svg>
<div class="name">right-circle-o</div>
<div class="fontclass">#icon-rightcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leftcircleo"></use>
</svg>
<div class="name">left-circle-o</div>
<div class="fontclass">#icon-leftcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-upcircleo"></use>
</svg>
<div class="name">up-circle-o</div>
<div class="fontclass">#icon-upcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-downcircleo"></use>
</svg>
<div class="name">down-circle-o</div>
<div class="fontclass">#icon-downcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-verticleleft"></use>
</svg>
<div class="name">verticleleft</div>
<div class="fontclass">#icon-verticleleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-verticleright"></use>
</svg>
<div class="name">verticleright</div>
<div class="fontclass">#icon-verticleright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-back"></use>
</svg>
<div class="name">rollback</div>
<div class="fontclass">#icon-back</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-retweet"></use>
</svg>
<div class="name">retweet</div>
<div class="fontclass">#icon-retweet</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shrink"></use>
</svg>
<div class="name">shrink</div>
<div class="fontclass">#icon-shrink</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowsalt"></use>
</svg>
<div class="name">arrowsalt</div>
<div class="fontclass">#icon-arrowsalt</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-doubleright"></use>
</svg>
<div class="name">doubleright</div>
<div class="fontclass">#icon-doubleright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-doubleleft"></use>
</svg>
<div class="name">doubleleft</div>
<div class="fontclass">#icon-doubleleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdown"></use>
</svg>
<div class="name">arrowdown</div>
<div class="fontclass">#icon-arrowdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowup"></use>
</svg>
<div class="name">arrowup</div>
<div class="fontclass">#icon-arrowup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowright"></use>
</svg>
<div class="name">arrowright</div>
<div class="fontclass">#icon-arrowright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowleft"></use>
</svg>
<div class="name">arrowleft</div>
<div class="fontclass">#icon-arrowleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-down"></use>
</svg>
<div class="name">down</div>
<div class="fontclass">#icon-down</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-up"></use>
</svg>
<div class="name">up</div>
<div class="fontclass">#icon-up</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-right"></use>
</svg>
<div class="name">right</div>
<div class="fontclass">#icon-right</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-left"></use>
</svg>
<div class="name">left</div>
<div class="fontclass">#icon-left</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-minussquareo"></use>
</svg>
<div class="name">minus-square-o</div>
<div class="fontclass">#icon-minussquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-minuscircle"></use>
</svg>
<div class="name">minus-circle</div>
<div class="fontclass">#icon-minuscircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-minuscircleo"></use>
</svg>
<div class="name">minus-circle-o</div>
<div class="fontclass">#icon-minuscircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg>
<div class="name">minus</div>
<div class="fontclass">#icon-minus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pluscircleo"></use>
</svg>
<div class="name">plus-circle-o</div>
<div class="fontclass">#icon-pluscircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pluscircle"></use>
</svg>
<div class="name">plus-circle</div>
<div class="fontclass">#icon-pluscircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg>
<div class="name">plus</div>
<div class="fontclass">#icon-plus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-infocirlce"></use>
</svg>
<div class="name">info-cirlce</div>
<div class="fontclass">#icon-infocirlce</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-infocirlceo"></use>
</svg>
<div class="name">info-cirlce-o</div>
<div class="fontclass">#icon-infocirlceo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-info"></use>
</svg>
<div class="name">info</div>
<div class="fontclass">#icon-info</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-exclamation"></use>
</svg>
<div class="name">exclamation</div>
<div class="fontclass">#icon-exclamation</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-exclamationcircle"></use>
</svg>
<div class="name">exclamation-circle</div>
<div class="fontclass">#icon-exclamationcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-exclamationcircleo"></use>
</svg>
<div class="name">exclamation-circle-o</div>
<div class="fontclass">#icon-exclamationcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-closecircle"></use>
</svg>
<div class="name">close-circle</div>
<div class="fontclass">#icon-closecircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-closecircleo"></use>
</svg>
<div class="name">close-circle-o</div>
<div class="fontclass">#icon-closecircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-checkcircle"></use>
</svg>
<div class="name">check-circle</div>
<div class="fontclass">#icon-checkcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-checkcircleo"></use>
</svg>
<div class="name">check-circle-o</div>
<div class="fontclass">#icon-checkcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-check"></use>
</svg>
<div class="name">check</div>
<div class="fontclass">#icon-check</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">close</div>
<div class="fontclass">#icon-close</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-customerservice"></use>
</svg>
<div class="name">customerservice</div>
<div class="fontclass">#icon-customerservice</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-creditcard"></use>
</svg>
<div class="name">creditcard</div>
<div class="fontclass">#icon-creditcard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-codesquareo"></use>
</svg>
<div class="name">code-square-o</div>
<div class="fontclass">#icon-codesquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-book"></use>
</svg>
<div class="name">book</div>
<div class="fontclass">#icon-book</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-barschart"></use>
</svg>
<div class="name">barschart</div>
<div class="fontclass">#icon-barschart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bars"></use>
</svg>
<div class="name">bars</div>
<div class="fontclass">#icon-bars</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-question"></use>
</svg>
<div class="name">question</div>
<div class="fontclass">#icon-question</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-questioncircle"></use>
</svg>
<div class="name">question-circle</div>
<div class="fontclass">#icon-questioncircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-questioncircleo"></use>
</svg>
<div class="name">question-circle-o</div>
<div class="fontclass">#icon-questioncircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pause"></use>
</svg>
<div class="name">pause</div>
<div class="fontclass">#icon-pause</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pausecircle"></use>
</svg>
<div class="name">pause-circle</div>
<div class="fontclass">#icon-pausecircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pausecircleo"></use>
</svg>
<div class="name">pause-circle-o</div>
<div class="fontclass">#icon-pausecircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clockcircle"></use>
</svg>
<div class="name">clock-circle</div>
<div class="fontclass">#icon-clockcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clockcircleo"></use>
</svg>
<div class="name">clock-circle-o</div>
<div class="fontclass">#icon-clockcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-swap"></use>
</svg>
<div class="name">swap</div>
<div class="fontclass">#icon-swap</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-swapleft"></use>
</svg>
<div class="name">swapleft</div>
<div class="fontclass">#icon-swapleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-swapright"></use>
</svg>
<div class="name">swapright</div>
<div class="fontclass">#icon-swapright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-plussquareo"></use>
</svg>
<div class="name">plus-square-o</div>
<div class="fontclass">#icon-plussquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-frown"></use>
</svg>
<div class="name">frown</div>
<div class="fontclass">#icon-frown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-menufold"></use>
</svg>
<div class="name">menufold</div>
<div class="fontclass">#icon-menufold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mail"></use>
</svg>
<div class="name">mail</div>
<div class="fontclass">#icon-mail</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-link"></use>
</svg>
<div class="name">link</div>
<div class="fontclass">#icon-link</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-areachart"></use>
</svg>
<div class="name">areachart</div>
<div class="fontclass">#icon-areachart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-linechart"></use>
</svg>
<div class="name">linechart</div>
<div class="fontclass">#icon-linechart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
<div class="name">home</div>
<div class="fontclass">#icon-home</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-laptop"></use>
</svg>
<div class="name">laptop</div>
<div class="fontclass">#icon-laptop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-star"></use>
</svg>
<div class="name">star</div>
<div class="fontclass">#icon-star</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-staro"></use>
</svg>
<div class="name">star-o</div>
<div class="fontclass">#icon-staro</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-filter"></use>
</svg>
<div class="name">filter</div>
<div class="fontclass">#icon-filter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-meho"></use>
</svg>
<div class="name">meho</div>
<div class="fontclass">#icon-meho</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-meh"></use>
</svg>
<div class="name">meh</div>
<div class="fontclass">#icon-meh</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shoppingcart"></use>
</svg>
<div class="name">shoppingcart</div>
<div class="fontclass">#icon-shoppingcart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-save"></use>
</svg>
<div class="name">save</div>
<div class="fontclass">#icon-save</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
<div class="name">user</div>
<div class="fontclass">#icon-user</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-videocamera"></use>
</svg>
<div class="name">videocamera</div>
<div class="fontclass">#icon-videocamera</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-totop"></use>
</svg>
<div class="name">totop</div>
<div class="fontclass">#icon-totop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-team"></use>
</svg>
<div class="name">team</div>
<div class="fontclass">#icon-team</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sharealt"></use>
</svg>
<div class="name">sharealt</div>
<div class="fontclass">#icon-sharealt</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-setting"></use>
</svg>
<div class="name">setting</div>
<div class="fontclass">#icon-setting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-picture"></use>
</svg>
<div class="name">picture</div>
<div class="fontclass">#icon-picture</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone"></use>
</svg>
<div class="name">phone</div>
<div class="fontclass">#icon-phone</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-paperclip"></use>
</svg>
<div class="name">paperclip</div>
<div class="fontclass">#icon-paperclip</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-notification"></use>
</svg>
<div class="name">notification</div>
<div class="fontclass">#icon-notification</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-menuunfold"></use>
</svg>
<div class="name">menuunfold</div>
<div class="fontclass">#icon-menuunfold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-inbox"></use>
</svg>
<div class="name">inbox</div>
<div class="fontclass">#icon-inbox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lock"></use>
</svg>
<div class="name">lock</div>
<div class="fontclass">#icon-lock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-qrcode"></use>
</svg>
<div class="name">qrcode</div>
<div class="fontclass">#icon-qrcode</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tags"></use>
</svg>
<div class="name">tags</div>
<div class="fontclass">#icon-tags</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tagso"></use>
</svg>
<div class="name">tagso</div>
<div class="fontclass">#icon-tagso</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cloudo"></use>
</svg>
<div class="name">cloud-o</div>
<div class="fontclass">#icon-cloudo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cloud"></use>
</svg>
<div class="name">cloud</div>
<div class="fontclass">#icon-cloud</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cloudupload"></use>
</svg>
<div class="name">cloudupload</div>
<div class="fontclass">#icon-cloudupload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clouddownload"></use>
</svg>
<div class="name">clouddownload</div>
<div class="fontclass">#icon-clouddownload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clouddownloado"></use>
</svg>
<div class="name">clouddownload-o</div>
<div class="fontclass">#icon-clouddownloado</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clouduploado"></use>
</svg>
<div class="name">cloudupload-o</div>
<div class="fontclass">#icon-clouduploado</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-enviroment"></use>
</svg>
<div class="name">enviroment</div>
<div class="fontclass">#icon-enviroment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-enviromento"></use>
</svg>
<div class="name">enviroment-o</div>
<div class="fontclass">#icon-enviromento</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-eye"></use>
</svg>
<div class="name">eye</div>
<div class="fontclass">#icon-eye</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-eyeo"></use>
</svg>
<div class="name">eye-o</div>
<div class="fontclass">#icon-eyeo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-camera"></use>
</svg>
<div class="name">camera</div>
<div class="fontclass">#icon-camera</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-camerao"></use>
</svg>
<div class="name">camera-o</div>
<div class="fontclass">#icon-camerao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-windows"></use>
</svg>
<div class="name">windows</div>
<div class="fontclass">#icon-windows</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-export2"></use>
</svg>
<div class="name">export2</div>
<div class="fontclass">#icon-export2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-export"></use>
</svg>
<div class="name">export</div>
<div class="fontclass">#icon-export</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-circledowno"></use>
</svg>
<div class="name">circledown-o</div>
<div class="fontclass">#icon-circledowno</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-circledown"></use>
</svg>
<div class="name">circledown</div>
<div class="fontclass">#icon-circledown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hdd"></use>
</svg>
<div class="name">hdd</div>
<div class="fontclass">#icon-hdd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ie"></use>
</svg>
<div class="name">ie</div>
<div class="fontclass">#icon-ie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-delete"></use>
</svg>
<div class="name">delete</div>
<div class="fontclass">#icon-delete</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-enter"></use>
</svg>
<div class="name">enter</div>
<div class="fontclass">#icon-enter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pushpino"></use>
</svg>
<div class="name">pushpin-o</div>
<div class="fontclass">#icon-pushpino</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pushpin"></use>
</svg>
<div class="name">pushpin</div>
<div class="fontclass">#icon-pushpin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-heart"></use>
</svg>
<div class="name">heart</div>
<div class="fontclass">#icon-heart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hearto"></use>
</svg>
<div class="name">heart-o</div>
<div class="fontclass">#icon-hearto</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-smile-circle"></use>
</svg>
<div class="name">smile</div>
<div class="fontclass">#icon-smile-circle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-smileo"></use>
</svg>
<div class="name">smile-o</div>
<div class="fontclass">#icon-smileo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-frowno"></use>
</svg>
<div class="name">frown-o</div>
<div class="fontclass">#icon-frowno</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-calculator"></use>
</svg>
<div class="name">calculator</div>
<div class="fontclass">#icon-calculator</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chrome"></use>
</svg>
<div class="name">chrome</div>
<div class="fontclass">#icon-chrome</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-github"></use>
</svg>
<div class="name">github</div>
<div class="fontclass">#icon-github</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-iconfontdesktop"></use>
</svg>
<div class="name">desktop</div>
<div class="fontclass">#icon-iconfontdesktop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caretcircleoup"></use>
</svg>
<div class="name">caret-circle-o-up</div>
<div class="fontclass">#icon-caretcircleoup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-upload"></use>
</svg>
<div class="name">upload</div>
<div class="fontclass">#icon-upload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-download"></use>
</svg>
<div class="name">download</div>
<div class="fontclass">#icon-download</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-piechart"></use>
</svg>
<div class="name">piechart</div>
<div class="fontclass">#icon-piechart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lock1"></use>
</svg>
<div class="name">lock</div>
<div class="fontclass">#icon-lock1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unlock"></use>
</svg>
<div class="name">unlock</div>
<div class="fontclass">#icon-unlock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-windowso"></use>
</svg>
<div class="name">windows-o</div>
<div class="fontclass">#icon-windowso</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dotchart"></use>
</svg>
<div class="name">dotchart</div>
<div class="fontclass">#icon-dotchart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-barchart"></use>
</svg>
<div class="name">barchart</div>
<div class="fontclass">#icon-barchart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-codesquare"></use>
</svg>
<div class="name">code-square</div>
<div class="fontclass">#icon-codesquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-plussquare"></use>
</svg>
<div class="name">plus-square</div>
<div class="fontclass">#icon-plussquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-minussquare"></use>
</svg>
<div class="name">minus-square</div>
<div class="fontclass">#icon-minussquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-closesquare"></use>
</svg>
<div class="name">close-square</div>
<div class="fontclass">#icon-closesquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-closesquareo"></use>
</svg>
<div class="name">close-square-o</div>
<div class="fontclass">#icon-closesquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-checksquare"></use>
</svg>
<div class="name">check-square</div>
<div class="fontclass">#icon-checksquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-checksquareo"></use>
</svg>
<div class="name">check-square-o</div>
<div class="fontclass">#icon-checksquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fastbackward"></use>
</svg>
<div class="name">fastbackward</div>
<div class="fontclass">#icon-fastbackward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fastforward"></use>
</svg>
<div class="name">fastforward</div>
<div class="fontclass">#icon-fastforward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-upsquare"></use>
</svg>
<div class="name">up-square</div>
<div class="fontclass">#icon-upsquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-downsquare"></use>
</svg>
<div class="name">down-square</div>
<div class="fontclass">#icon-downsquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leftsquare