mk-component
Version:
- 1、npm install mk-component --save
2,328 lines • 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"></use>
</svg>
<div class="name">left-square</div>
<div class="fontclass">#icon-leftsquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rightsquare"></use>
</svg>
<div class="name">right-square</div>
<div class="fontclass">#icon-rightsquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rightsquareo"></use>
</svg>
<div class="name">right-square-o</div>
<div class="fontclass">#icon-rightsquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leftsquareo"></use>
</svg>
<div class="name">left-square-o</div>
<div class="fontclass">#icon-leftsquareo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-down-square-o"></use>
</svg>
<div class="name">down-square-o</div>
<div class="fontclass">#icon-down-square-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-up-square-o"></use>
</svg>
<div class="name">up-square-o</div>
<div class="fontclass">#icon-up-square-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-play"></use>
</svg>
<div class="name">play</div>
<div class="fontclass">#icon-play</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-playcircleo"></use>
</svg>
<div class="name">play-circle-o</div>
<div class="fontclass">#icon-playcircleo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tag"></use>
</svg>
<div class="name">tag</div>
<div class="fontclass">#icon-tag</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tago"></use>
</svg>
<div class="name">tag-o</div>
<div class="fontclass">#icon-tago</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-addfile"></use>
</svg>
<div class="name">addfile</div>
<div class="fontclass">#icon-addfile</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-folder1"></use>
</svg>
<div class="name">folder</div>
<div class="fontclass">#icon-folder1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-file1"></use>
</svg>
<div class="name">file</div>
<div class="fontclass">#icon-file1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-switcher"></use>
</svg>
<div class="name">switcher</div>
<div class="fontclass">#icon-switcher</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-addfolder"></use>
</svg>
<div class="name">addfolder</div>
<div class="fontclass">#icon-addfolder</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-folderopen"></use>
</svg>
<div class="name">folderopen</div>
<div class="fontclass">#icon-folderopen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-search1"></use>
</svg>
<div class="name">search</div>
<div class="fontclass">#icon-search1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ellipsis1"></use>
</svg>
<div class="name">ellipsis</div>
<div class="fontclass">#icon-ellipsis1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-calendar"></use>
</svg>
<div class="name">calendar</div>
<div class="fontclass">#icon-calendar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-filetext1"></use>
</svg>
<div class="name">filetext</div>
<div class="fontclass">#icon-filetext1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-copy1"></use>
</svg>
<div class="name">copy</div>
<div class="fontclass">#icon-copy1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jpgfile1"></use>
</svg>
<div class="name">jpgfile</div>
<div class="fontclass">#icon-jpgfile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pdffile1"></use>
</svg>
<div class="name">pdffile</div>
<div class="fontclass">#icon-pdffile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-exclefile1"></use>
</svg>
<div class="name">exclefile</div>
<div class="fontclass">#icon-exclefile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pptfile1"></use>
</svg>
<div class="name">pptfile</div>
<div class="fontclass">#icon-pptfile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unknowfile1"></use>
</svg>
<div class="name">unknowfile</div>
<div class="fontclass">#icon-unknowfile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wordfile1"></use>
</svg>
<div class="name">wordfile</div>
<div class="fontclass">#icon-wordfile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dingding"></use>
</svg>
<div class="name">dingding</div>
<div class="fontclass">#icon-dingding</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dingding-o"></use>
</svg>
<div class="name">dingding-o</div>
<div class="fontclass">#icon-dingding-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mobile1"></use>
</svg>
<div class="name">mobile</div>
<div class="fontclass">#icon-mobile1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tablet1"></use>
</svg>
<div class="name">tablet</div>
<div class="fontclass">#icon-tablet1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bells"></use>
</svg>
<div class="name">bells</div>
<div class="fontclass">#icon-bells</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-disconnect"></use>
</svg>
<div class="name">disconnect</div>
<div class="fontclass">#icon-disconnect</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-database"></use>
</svg>
<div class="name">database</div>
<div class="fontclass">#icon-database</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-barcode"></use>
</svg>
<div class="name">barcode</div>
<div class="fontclass">#icon-barcode</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hourglass"></use>
</svg>
<div class="name">hourglass</div>
<div class="fontclass">#icon-hourglass</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-key"></use>
</svg>
<div class="name">key</div>
<div class="fontclass">#icon-key</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-flag"></use>
</svg>
<div class="name">flag</div>
<div class="fontclass">#icon-flag</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-layout"></use>
</svg>
<div class="name">layout</div>
<div class="fontclass">#icon-layout</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-printer"></use>
</svg>
<div class="name">printer</div>
<div class="fontclass">#icon-printer</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-USB"></use>
</svg>
<div class="name">USB</div>
<div class="fontclass">#icon-USB</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-skin"></use>
</svg>
<div class="name">skin</div>
<div class="fontclass">#icon-skin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tool"></use>
</svg>
<div class="name">tool</div>
<div class="fontclass">#icon-tool</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-car"></use>
</svg>
<div class="name">car</div>
<div class="fontclass">#icon-car</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-addusergroup"></use>
</svg>
<div class="name">addusergroup</div>
<div class="fontclass">#icon-addusergroup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-carryout"></use>
</svg>
<div class="name">carryout</div>
<div class="fontclass">#icon-carryout</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-deleteuser"></use>
</svg>
<div class="name">deleteuser</div>
<div class="fontclass">#icon-deleteuser</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-deleteusergroup"></use>
</svg>
<div class="name">deleteusergroup</div>
<div class="fontclass">#icon-deleteusergroup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-man"></use>
</svg>
<div class="name">man</div>
<div class="fontclass">#icon-man</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-isv"></use>
</svg>
<div class="name">isv</div>
<div class="fontclass">#icon-isv</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gift"></use>
</svg>
<div class="name">gift</div>
<div class="fontclass">#icon-gift</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-idcard"></use>
</svg>
<div class="name">idcard</div>
<div class="fontclass">#icon-idcard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-medicinebox"></use>
</svg>
<div class="name">medicinebox</div>
<div class="fontclass">#icon-medicinebox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redenvelopes"></use>
</svg>
<div class="name">redenvelopes</div>
<div class="fontclass">#icon-redenvelopes</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rest"></use>
</svg>
<div class="name">rest</div>
<div class="fontclass">#icon-rest</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Safety"></use>
</svg>
<div class="name">Safety</div>
<div class="fontclass">#icon-Safety</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wallet"></use>
</svg>
<div class="name">wallet</div>
<div class="fontclass">#icon-wallet</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-woman"></use>
</svg>
<div class="name">woman</div>
<div class="fontclass">#icon-woman</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-adduser"></use>
</svg>
<div class="name">adduser</div>
<div class="fontclass">#icon-adduser</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bank"></use>
</svg>
<div class="name">bank</div>
<div class="fontclass">#icon-bank</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Trophy"></use>
</svg>
<div class="name">Trophy</div>
<div class="fontclass">#icon-Trophy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-loading1"></use>
</svg>
<div class="name">loading</div>
<div class="fontclass">#icon-loading1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-loading2"></use>
</svg>
<div class="name">loading</div>
<div class="fontclass">#icon-loading2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-like2"></use>
</svg>
<div class="name">like</div>
<div class="fontclass">#icon-like2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dislike2"></use>
</svg>
<div class="name">dislike</div>
<div class="fontclass">#icon-dislike2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-like1"></use>
</svg>
<div class="name">like</div>
<div class="fontclass">#icon-like1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dislike1"></use>
</svg>
<div class="name">dislike</div>
<div class="fontclass">#icon-dislike1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bulb1"></use>
</svg>
<div class="name">bulb</div>
<div class="fontclass">#icon-bulb1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rocket1"></use>
</svg>
<div class="name">rocket</div>
<div class="fontclass">#icon-rocket1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-select1"></use>
</svg>
<div class="name">select</div>
<div class="fontclass">#icon-select1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-apple1"></use>
</svg>
<div class="name">apple</div>
<div class="fontclass">#icon-apple1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-apple-o"></use>
</svg>
<div class="name">apple-o</div>
<div class="fontclass">#icon-apple-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android1"></use>
</svg>
<div class="name">android</div>
<div class="fontclass">#icon-android1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android"></use>
</svg>
<div class="name">android-o</div>
<div class="fontclass">#icon-android</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aliwangwang-o1"></use>
</svg>
<div class="name">aliwangwang-o</div>
<div class="fontclass">#icon-aliwangwang-o1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aliwangwang"></use>
</svg>
<div class="name">aliwangwang</div>
<div class="fontclass">#icon-aliwangwang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pay-circle1"></use>
</svg>
<div class="name">pay-circle</div>
<div class="fontclass">#icon-pay-circle1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pay-circle-o1"></use>
</svg>
<div class="name">pay-circle-o</div>
<div class="fontclass">#icon-pay-circle-o1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-poweroff"></use>
</svg>
<div class="name">poweroff</div>
<div class="fontclass">#icon-poweroff</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-trademark"></use>
</svg>
<div class="name">trademark</div>
<div class="fontclass">#icon-trademark</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-find"></use>
</svg>
<div class="name">find</div>
<div class="fontclass">#icon-find</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-copyright"></use>
</svg>
<div class="name">copyright</div>
<div class="fontclass">#icon-copyright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sound"></use>
</svg>
<div class="name">sound</div>
<div class="fontclass">#icon-sound</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-earth"></use>
</svg>
<div class="name">earth</div>
<div class="fontclass">#icon-earth</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wifi"></use>
</svg>
<div class="name">wifi</div>
<div class="fontclass">#icon-wifi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sync"></use>
</svg>
<div class="name">sync</div>
<div class="fontclass">#icon-sync</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-login"></use>
</svg>
<div class="name">login</div>
<div class="fontclass">#icon-login</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-logout"></use>
</svg>
<div class="name">logout</div>
<div class="fontclass">#icon-logout</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-reload1"></use>
</svg>
<div class="name">reload</div>
<div class="fontclass">#icon-reload1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-message1"></use>
</svg>
<div class="name">message</div>
<div class="fontclass">#icon-message1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shake"></use>
</svg>
<div class="name">shake </div>
<div class="fontclass">#icon-shake</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-API"></use>
</svg>
<div class="name">API</div>
<div class="fontclass">#icon-API</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-appstore-o"></use>
</svg>
<div class="name">appstore-o</div>
<div class="fontclass">#icon-appstore-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-appstore1"></use>
</svg>
<div class="name">appstore</div>
<div class="fontclass">#icon-appstore1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-scan1"></use>
</svg>
<div class="name">scan</div>
<div class="fontclass">#icon-scan1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-exception1"></use>
</svg>
<div class="name">exception</div>
<div class="fontclass">#icon-exception1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-contacts"></use>
</svg>
<div class="name">contacts</div>
<div class="fontclass">#icon-contacts</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-solution1"></use>
</svg>
<div class="name">solution</div>
<div class="fontclass">#icon-solution1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fork"></use>
</svg>
<div class="name">fork</div>
<div class="fontclass">#icon-fork</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-edit"></use>
</svg>
<div class="name">edit</div>
<div class="fontclass">#icon-edit</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-form"></use>
</svg>
<div class="name">表单</div>
<div class="fontclass">#icon-form</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-warning"></use>
</svg>
<div class="name">error</div>
<div class="fontclass">#icon-warning</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-table"></use>
</svg>
<div class="name">列表</div>
<div class="fontclass">#icon-table</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-profile"></use>
</svg>
<div class="name">详情</div>
<div class="fontclass">#icon-profile</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dashboard"></use>
</svg>
<div class="name">dashboard</div>
<div class="fontclass">#icon-dashboard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-indent-left"></use>
</svg>
<div class="name">indent-left</div>
<div class="fontclass">#icon-indent-left</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-indent-right"></use>
</svg>
<div class="name">indent-right</div>
<div class="fontclass">#icon-indent-right</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-menu-unfold"></use>
</svg>
<div class="name">menu-unfold</div>
<div class="fontclass">#icon-menu-unfold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-menu-fold"></use>
</svg>
<div class="name">menu-fold</div>
<div class="fontclass">#icon-menu-fold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-antdesign"></use>
</svg>
<div class="name">ant design</div>
<div class="fontclass">#icon-antdesign</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-alipay-square"></use>
</svg>
<div class="name">alipay-square</div>
<div class="fontclass">#icon-alipay-square</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-codepen-circle"></use>
</svg>
<div class="name">codepen-circle</div>
<div class="fontclass">#icon-codepen-circle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-google"></use>
</svg>
<div class="name">google</div>
<div class="fontclass">#icon-google</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-amazon"></use>
</svg>
<div class="name">amazon</div>
<div class="fontclass">#icon-amazon</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-codepen"></use>
</svg>
<div class="name">codepen</div>
<div class="fontclass">#icon-codepen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-facebook-square"></use>
</svg>
<div class="name">facebook-square</div>
<div class="fontclass">#icon-facebook-square</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dropbox"></use>
</svg>
<div class="name">dropbox</div>
<div class="fontclass">#icon-dropbox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-googleplus"></use>
</svg>
<div class="name">google plus</div>
<div class="fontclass">#icon-googleplus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-linkedin-square"></use>
</svg>
<div class="name">linkedin-square</div>
<div class="fontclass">#icon-linkedin-square</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-medium-monogram"></use>
</svg>
<div class="name">medium-monogram</div>
<div class="fontclass">#icon-medium-monogram</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gitlab"></use>
</svg>
<div class="name">gitlab</div>
<div class="fontclass">#icon-gitlab</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-medium-wordmark"></use>
</svg>
<div class="name">medium-wordmark</div>
<div class="fontclass">#icon-medium-wordmark</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
<div class="name">QQ</div>
<div class="fontclass">#icon-QQ</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-skype"></use>
</svg>
<div class="name">skype</div>
<div class="fontclass">#icon-skype</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-taobao-square"></use>
</svg>
<div class="name">taobao-square</div>
<div class="fontclass">#icon-taobao-square</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-alipay-circle"></use>
</svg>
<div class="name">alipay-circle</div>
<div class="fontclass">#icon-alipay-circle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-youtube"></use>
</svg>
<div class="name">youtube</div>
<div class="fontclass">#icon-youtube</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wechat"></use>
</svg>
<div class="name">wechat</div>
<div class="fontclass">#icon-wechat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-twitter"></use>
</svg>
<div class="name">twitter</div>
<div class="fontclass">#icon-twitter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibo"></use>
</svg>
<div class="name">weibo</div>
<div class="fontclass">#icon-weibo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-HTML"></use>
</svg>
<div class="name">HTML5</div>
<div class="fontclass">#icon-HTML</div>
</li>
</ul>
<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="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
.icon {
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
vertical-align: <span class="hljs-number">-0.15</span>em;
fill: currentColor;
overflow: hidden;
}
<<span class="hljs-regexp">/style></span></code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
</span><<span class="hljs-regexp">/svg>
</span></code></pre>
</div>
</body>
</html>