vue-moo
Version:
moo
4,088 lines • 167 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="#icon2-number_"></use>
</svg>
<div class="name">number_6</div>
<div class="fontclass">#icon2-number_</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_1"></use>
</svg>
<div class="name">number_7</div>
<div class="fontclass">#icon2-number_1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_2"></use>
</svg>
<div class="name">number_9</div>
<div class="fontclass">#icon2-number_2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_3"></use>
</svg>
<div class="name">number_0</div>
<div class="fontclass">#icon2-number_3</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_4"></use>
</svg>
<div class="name">number_3</div>
<div class="fontclass">#icon2-number_4</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_5"></use>
</svg>
<div class="name">number_1</div>
<div class="fontclass">#icon2-number_5</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_6"></use>
</svg>
<div class="name">number_4</div>
<div class="fontclass">#icon2-number_6</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_7"></use>
</svg>
<div class="name">number_8</div>
<div class="fontclass">#icon2-number_7</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_punctuation"></use>
</svg>
<div class="name">number_punctuation</div>
<div class="fontclass">#icon2-number_punctuation</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_8"></use>
</svg>
<div class="name">number_5</div>
<div class="fontclass">#icon2-number_8</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-number_9"></use>
</svg>
<div class="name">number_2</div>
<div class="fontclass">#icon2-number_9</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-add"></use>
</svg>
<div class="name">add</div>
<div class="fontclass">#icon2-add</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-column"></use>
</svg>
<div class="name">3column</div>
<div class="fontclass">#icon2-column</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-column1"></use>
</svg>
<div class="name">4column</div>
<div class="fontclass">#icon2-column1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-air-drop"></use>
</svg>
<div class="name">air-drop</div>
<div class="fontclass">#icon2-air-drop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-add-r"></use>
</svg>
<div class="name">add-r</div>
<div class="fontclass">#icon2-add-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-add-s"></use>
</svg>
<div class="name">add-s</div>
<div class="fontclass">#icon2-add-s</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-double-left"></use>
</svg>
<div class="name">arrow-double-left</div>
<div class="fontclass">#icon2-arrow-double-left</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-app"></use>
</svg>
<div class="name">app</div>
<div class="fontclass">#icon2-app</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-also-loan"></use>
</svg>
<div class="name">also-loan</div>
<div class="fontclass">#icon2-also-loan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-ascending"></use>
</svg>
<div class="name">ascending</div>
<div class="fontclass">#icon2-ascending</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-air"></use>
</svg>
<div class="name">air</div>
<div class="fontclass">#icon2-air</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-double-right"></use>
</svg>
<div class="name">arrow-double-right</div>
<div class="fontclass">#icon2-arrow-double-right</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-atm"></use>
</svg>
<div class="name">atm</div>
<div class="fontclass">#icon2-atm</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-atm-away"></use>
</svg>
<div class="name">atm-away</div>
<div class="fontclass">#icon2-atm-away</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bad-r"></use>
</svg>
<div class="name">bad-r</div>
<div class="fontclass">#icon2-bad-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-attendance"></use>
</svg>
<div class="name">attendance</div>
<div class="fontclass">#icon2-attendance</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bad"></use>
</svg>
<div class="name">bad</div>
<div class="fontclass">#icon2-bad</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-back-r"></use>
</svg>
<div class="name">back-r</div>
<div class="fontclass">#icon2-back-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-back"></use>
</svg>
<div class="name">back</div>
<div class="fontclass">#icon2-back</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bank-card"></use>
</svg>
<div class="name">bank-card</div>
<div class="fontclass">#icon2-bank-card</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bar-chart"></use>
</svg>
<div class="name">bar-chart</div>
<div class="fontclass">#icon2-bar-chart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-box"></use>
</svg>
<div class="name">box</div>
<div class="fontclass">#icon2-box</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-building"></use>
</svg>
<div class="name">building</div>
<div class="fontclass">#icon2-building</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-business"></use>
</svg>
<div class="name">business</div>
<div class="fontclass">#icon2-business</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bill"></use>
</svg>
<div class="name">bill</div>
<div class="fontclass">#icon2-bill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-calculator"></use>
</svg>
<div class="name">calculator</div>
<div class="fontclass">#icon2-calculator</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-calendar"></use>
</svg>
<div class="name">calendar</div>
<div class="fontclass">#icon2-calendar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-camera"></use>
</svg>
<div class="name">camera</div>
<div class="fontclass">#icon2-camera</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-businesscard"></use>
</svg>
<div class="name">businesscard</div>
<div class="fontclass">#icon2-businesscard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-car"></use>
</svg>
<div class="name">car</div>
<div class="fontclass">#icon2-car</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-chat"></use>
</svg>
<div class="name">chat</div>
<div class="fontclass">#icon2-chat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-cangneishicao"></use>
</svg>
<div class="name">cangneishicao</div>
<div class="fontclass">#icon2-cangneishicao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-check"></use>
</svg>
<div class="name">check</div>
<div class="fontclass">#icon2-check</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-checkbox-selected"></use>
</svg>
<div class="name">checkbox-selected</div>
<div class="fontclass">#icon2-checkbox-selected</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-Chinese"></use>
</svg>
<div class="name">Chinese</div>
<div class="fontclass">#icon2-Chinese</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-checkbox"></use>
</svg>
<div class="name">checkbox</div>
<div class="fontclass">#icon2-checkbox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-clock"></use>
</svg>
<div class="name">clock</div>
<div class="fontclass">#icon2-clock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-close"></use>
</svg>
<div class="name">close</div>
<div class="fontclass">#icon2-close</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-commodity"></use>
</svg>
<div class="name">commodity</div>
<div class="fontclass">#icon2-commodity</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-colthes"></use>
</svg>
<div class="name">colthes</div>
<div class="fontclass">#icon2-colthes</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-compare"></use>
</svg>
<div class="name">compare</div>
<div class="fontclass">#icon2-compare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-compass"></use>
</svg>
<div class="name">compass</div>
<div class="fontclass">#icon2-compass</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-complain"></use>
</svg>
<div class="name">complain</div>
<div class="fontclass">#icon2-complain</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-complete-r"></use>
</svg>
<div class="name">complete-r</div>
<div class="fontclass">#icon2-complete-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-complete"></use>
</svg>
<div class="name">complete</div>
<div class="fontclass">#icon2-complete</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-courier"></use>
</svg>
<div class="name">courier</div>
<div class="fontclass">#icon2-courier</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-copy"></use>
</svg>
<div class="name">copy</div>
<div class="fontclass">#icon2-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-CSR"></use>
</svg>
<div class="name">CSR</div>
<div class="fontclass">#icon2-CSR</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-create-bill"></use>
</svg>
<div class="name">create-bill</div>
<div class="fontclass">#icon2-create-bill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-cut"></use>
</svg>
<div class="name">cut</div>
<div class="fontclass">#icon2-cut</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-dashboard"></use>
</svg>
<div class="name">dashboard</div>
<div class="fontclass">#icon2-dashboard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-delete"></use>
</svg>
<div class="name">delete</div>
<div class="fontclass">#icon2-delete</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-delivery"></use>
</svg>
<div class="name">delivery</div>
<div class="fontclass">#icon2-delivery</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-customs"></use>
</svg>
<div class="name">customs</div>
<div class="fontclass">#icon2-customs</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-descending"></use>
</svg>
<div class="name">descending</div>
<div class="fontclass">#icon2-descending</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-dialog"></use>
</svg>
<div class="name">dialog</div>
<div class="fontclass">#icon2-dialog</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-diamond"></use>
</svg>
<div class="name">diamond</div>
<div class="fontclass">#icon2-diamond</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-download"></use>
</svg>
<div class="name">download</div>
<div class="fontclass">#icon2-download</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-ding"></use>
</svg>
<div class="name">ding</div>
<div class="fontclass">#icon2-ding</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-drop"></use>
</svg>
<div class="name">drop</div>
<div class="fontclass">#icon2-drop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-dollar"></use>
</svg>
<div class="name">dollar</div>
<div class="fontclass">#icon2-dollar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-duihua"></use>
</svg>
<div class="name">duihua</div>
<div class="fontclass">#icon2-duihua</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-edit"></use>
</svg>
<div class="name">edit</div>
<div class="fontclass">#icon2-edit</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-electronics"></use>
</svg>
<div class="name">electronics</div>
<div class="fontclass">#icon2-electronics</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-English"></use>
</svg>
<div class="name">English</div>
<div class="fontclass">#icon2-English</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-error-s"></use>
</svg>
<div class="name">error-s</div>
<div class="fontclass">#icon2-error-s</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-enclosure"></use>
</svg>
<div class="name">enclosure</div>
<div class="fontclass">#icon2-enclosure</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-error-r"></use>
</svg>
<div class="name">error-r</div>
<div class="fontclass">#icon2-error-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exclamatory-mark-r"></use>
</svg>
<div class="name">exclamatory-mark-r</div>
<div class="fontclass">#icon2-exclamatory-mark-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exchange"></use>
</svg>
<div class="name">exchange</div>
<div class="fontclass">#icon2-exchange</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exclamatory-mark-t"></use>
</svg>
<div class="name">exclamatory-mark-t</div>
<div class="fontclass">#icon2-exclamatory-mark-t</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exclamatory-mark"></use>
</svg>
<div class="name">exclamatory-mark</div>
<div class="fontclass">#icon2-exclamatory-mark</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-extend-r"></use>
</svg>
<div class="name">extend-r</div>
<div class="fontclass">#icon2-extend-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-extend"></use>
</svg>
<div class="name">extend</div>
<div class="fontclass">#icon2-extend</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exit-fullscreen"></use>
</svg>
<div class="name">exit-fullscreen</div>
<div class="fontclass">#icon2-exit-fullscreen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-finance"></use>
</svg>
<div class="name">finance</div>
<div class="fontclass">#icon2-finance</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-favorites"></use>
</svg>
<div class="name">favorites</div>
<div class="fontclass">#icon2-favorites</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-filter"></use>
</svg>
<div class="name">filter</div>
<div class="fontclass">#icon2-filter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-first-page"></use>
</svg>
<div class="name">first-page</div>
<div class="fontclass">#icon2-first-page</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-flash-lamp-auto"></use>
</svg>
<div class="name">flash-lamp-auto</div>
<div class="fontclass">#icon2-flash-lamp-auto</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-flash-lamp-off"></use>
</svg>
<div class="name">flash-lamp-off</div>
<div class="fontclass">#icon2-flash-lamp-off</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-flash-lamp"></use>
</svg>
<div class="name">flash-lamp</div>
<div class="fontclass">#icon2-flash-lamp</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forward-r"></use>
</svg>
<div class="name">forward-r</div>
<div class="fontclass">#icon2-forward-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forbidden"></use>
</svg>
<div class="name">forbidden</div>
<div class="fontclass">#icon2-forbidden</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forward-sorting"></use>
</svg>
<div class="name">forward-sorting</div>
<div class="fontclass">#icon2-forward-sorting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-fullscreen"></use>
</svg>
<div class="name">fullscreen</div>
<div class="fontclass">#icon2-fullscreen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forward"></use>
</svg>
<div class="name">forward</div>
<div class="fontclass">#icon2-forward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-gifts"></use>
</svg>
<div class="name">gifts</div>
<div class="fontclass">#icon2-gifts</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-free"></use>
</svg>
<div class="name">free</div>
<div class="fontclass">#icon2-free</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-folder"></use>
</svg>
<div class="name">folder</div>
<div class="fontclass">#icon2-folder</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-good-r"></use>
</svg>
<div class="name">good-r</div>
<div class="fontclass">#icon2-good-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-good"></use>
</svg>
<div class="name">good</div>
<div class="fontclass">#icon2-good</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-group"></use>
</svg>
<div class="name">group</div>
<div class="fontclass">#icon2-group</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-home"></use>
</svg>
<div class="name">home</div>
<div class="fontclass">#icon2-home</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-history"></use>
</svg>
<div class="name">history</div>
<div class="fontclass">#icon2-history</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-image-text"></use>
</svg>
<div class="name">image-text</div>
<div class="fontclass">#icon2-image-text</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-horizontal-retractio"></use>
</svg>
<div class="name">horizontal-retractio</div>
<div class="fontclass">#icon2-horizontal-retractio</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-horizontal-expansion"></use>
</svg>
<div class="name">horizontal-expansion</div>
<div class="fontclass">#icon2-horizontal-expansion</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-horn"></use>
</svg>
<div class="name">horn</div>
<div class="fontclass">#icon2-horn</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-import"></use>
</svg>
<div class="name">import</div>
<div class="fontclass">#icon2-import</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-image"></use>
</svg>
<div class="name">image</div>
<div class="fontclass">#icon2-image</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-info-r"></use>
</svg>
<div class="name">info-r</div>
<div class="fontclass">#icon2-info-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-info"></use>
</svg>
<div class="name">info</div>
<div class="fontclass">#icon2-info</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-information"></use>
</svg>
<div class="name">information</div>
<div class="fontclass">#icon2-information</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-key"></use>
</svg>
<div class="name">key</div>
<div class="fontclass">#icon2-key</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-international"></use>
</svg>
<div class="name">international</div>
<div class="fontclass">#icon2-international</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-keyboard"></use>
</svg>
<div class="name">keyboard</div>
<div class="fontclass">#icon2-keyboard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-last-page"></use>
</svg>
<div class="name">last-page</div>
<div class="fontclass">#icon2-last-page</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-increase"></use>
</svg>
<div class="name">increase</div>
<div class="fontclass">#icon2-increase</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-left"></use>
</svg>
<div class="name">left</div>
<div class="fontclass">#icon2-left</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-letter"></use>
</svg>
<div class="name">letter</div>
<div class="fontclass">#icon2-letter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-lefy-exchange"></use>
</svg>
<div class="name">lefy-exchange</div>
<div class="fontclass">#icon2-lefy-exchange</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-left-sorting"></use>
</svg>
<div class="name">left-sorting</div>
<div class="fontclass">#icon2-left-sorting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-light"></use>
</svg>
<div class="name">light</div>
<div class="fontclass">#icon2-light</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-like"></use>
</svg>
<div class="name">like</div>
<div class="fontclass">#icon2-like</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-link"></use>
</svg>
<div class="name">link</div>
<div class="fontclass">#icon2-link</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-line"></use>
</svg>
<div class="name">line</div>
<div class="fontclass">#icon2-line</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-load"></use>
</svg>
<div class="name">load</div>
<div class="fontclass">#icon2-load</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-loading-"></use>
</svg>
<div class="name">loading-2</div>
<div class="fontclass">#icon2-loading-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-loading-1"></use>
</svg>
<div class="name">loading-1</div>
<div class="fontclass">#icon2-loading-1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-lock"></use>
</svg>
<div class="name">lock</div>
<div class="fontclass">#icon2-lock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-loan"></use>
</svg>
<div class="name">loan</div>
<div class="fontclass">#icon2-loan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-location"></use>
</svg>
<div class="name">location</div>
<div class="fontclass">#icon2-location</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-logistics"></use>
</svg>
<div class="name">logistics</div>
<div class="fontclass">#icon2-logistics</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-macbook"></use>
</svg>
<div class="name">macbook</div>
<div class="fontclass">#icon2-macbook</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-logout"></use>
</svg>
<div class="name">logout</div>
<div class="fontclass">#icon2-logout</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-minus-r"></use>
</svg>
<div class="name">minus-r</div>
<div class="fontclass">#icon2-minus-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-map-"></use>
</svg>
<div class="name">map-1</div>
<div class="fontclass">#icon2-map-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-map-1"></use>
</svg>
<div class="name">map-2</div>
<div class="fontclass">#icon2-map-1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-mic"></use>
</svg>
<div class="name">mic</div>
<div class="fontclass">#icon2-mic</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-minus"></use>
</svg>
<div class="name">minus</div>
<div class="fontclass">#icon2-minus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-mobile-Phone"></use>
</svg>
<div class="name">mobile-Phone</div>
<div class="fontclass">#icon2-mobile-Phone</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-minus-s"></use>
</svg>
<div class="name">minus-s</div>
<div class="fontclass">#icon2-minus-s</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-money"></use>
</svg>
<div class="name">money</div>
<div class="fontclass">#icon2-money</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-monitor"></use>
</svg>
<div class="name">monitor</div>
<div class="fontclass">#icon2-monitor</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-money-bill"></use>
</svg>
<div class="name">money-bill</div>
<div class="fontclass">#icon2-money-bill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-moneys"></use>
</svg>
<div class="name">moneys</div>
<div class="fontclass">#icon2-moneys</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-more-transverse"></use>
</svg>
<div class="name">more-transverse</div>
<div class="fontclass">#icon2-more-transverse</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-locker"></use>
</svg>
<div class="name">locker</div>
<div class="fontclass">#icon2-locker</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-more-vertical"></use>
</svg>
<div class="name">more-vertical</div>
<div class="fontclass">#icon2-more-vertical</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-nav-list"></use>
</svg>
<div class="name">nav-list</div>
<div class="fontclass">#icon2-nav-list</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-news"></use>
</svg>
<div class="name">news</div>
<div class="fontclass">#icon2-news</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-no-attendance"></use>
</svg>
<div class="name">no-attendance</div>
<div class="fontclass">#icon2-no-attendance</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-not-sign"></use>
</svg>
<div class="name">not-sign</div>
<div class="fontclass">#icon2-not-sign</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-navigation"></use>
</svg>
<div class="name">navigation</div>
<div class="fontclass">#icon2-navigation</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-network"></use>
</svg>
<div class="name">network</div>
<div class="fontclass">#icon2-network</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-notice"></use>
</svg>
<div class="name">notice</div>
<div class="fontclass">#icon2-notice</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-office"></use>
</svg>
<div class="name">office</div>
<div class="fontclass">#icon2-office</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-operation"></use>
</svg>
<div class="name">operation</div>
<div class="fontclass">#icon2-operation</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-package"></use>
</svg>
<div class="name">package</div>
<div class="fontclass">#icon2-package</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-organization"></use>
</svg>
<div class="name">organization</div>
<div class="fontclass">#icon2-organization</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-open-package"></use>
</svg>
<div class="name">open-package</div>
<div class="fontclass">#icon2-open-package</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-paste"></use>
</svg>
<div class="name">paste</div>
<div class="fontclass">#icon2-paste</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-paly"></use>
</svg>
<div class="name">paly</div>
<div class="fontclass">#icon2-paly</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-pause"></use>
</svg>
<div class="name">pause</div>
<div class="fontclass">#icon2-pause</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-phone-r"></use>
</svg>
<div class="name">phone-r</div>
<div class="fontclass">#icon2-phone-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-PDA"></use>
</svg>
<div class="name">PDA</div>
<div class="fontclass">#icon2-PDA</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-pie-chart"></use>
</svg>
<div class="name">pie-chart</div>
<div class="fontclass">#icon2-pie-chart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-position"></use>
</svg>
<div class="name">position</div>
<div class="fontclass">#icon2-position</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-power"></use>
</svg>
<div class="name">power</div>
<div class="fontclass">#icon2-power</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-prine"></use>
</svg>
<div class="name">prine</div>
<div class="fontclass">#icon2-prine</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-quality"></use>
</svg>
<div class="name">quality</div>
<div class="fontclass">#icon2-quality</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-question-mark-r"></use>
</svg>
<div class="name">question-mark-r</div>
<div class="fontclass">#icon2-question-mark-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-process"></use>
</svg>
<div class="name">process</div>
<div class="fontclass">#icon2-process</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-ppt"></use>
</svg>
<div class="name">ppt</div>
<div class="fontclass">#icon2-ppt</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-question-mark"></use>
</svg>
<div class="name">question-mark</div>
<div class="fontclass">#icon2-question-mark</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-Raidobox-selectedRai"></use>
</svg>
<div class="name">Raidobox-selectedRai</div>
<div class="fontclass">#icon2-Raidobox-selectedRai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-red-packet"></use>
</svg>
<div class="name">red-packet</div>
<div class="fontclass">#icon2-red-packet</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-radar"></use>
</svg>
<div class="name">radar</div>
<div class="fontclass">#icon2-radar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-refund"></use>
</svg>
<div class="name">refund</div>
<div class="fontclass">#icon2-refund</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-register"></use>
</svg>
<div class="name">register</div>
<div class="fontclass">#icon2-register</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-Raidobox"></use>
</svg>
<div class="name">Raidobox</div>
<div class="fontclass">#icon2-Raidobox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-resource"></use>
</svg>
<div class="name">resource</div>
<div class="fontclass">#icon2-resource</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-refresh"></use>
</svg>
<div class="name">refresh</div>
<div class="fontclass">#icon2-refresh</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-reverse-sorting"></use>
</svg>
<div class="name">reverse-sorting</div>
<div class="fontclass">#icon2-reverse-sorting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-relationship"></use>
</svg>
<div class="name">relationship</div>
<div class="fontclass">#icon2-relationship</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-right-exchange"></use>
</svg>
<div class="name">right-exchange</div>
<div class="fontclass">#icon2-right-exchange</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-rise"></use>
</svg>
<div class="name">rise</div>
<div class="fontclass">#icon2-rise</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-right"></use>
</svg>
<div class="name">right</div>
<div class="fontclass">#icon2-right</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-right-sorting"></use>
</svg>
<div class="name">right-sorting</div>
<div class="fontclass">#icon2-right-sorting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-RMB"></use>
</svg>
<div class="name">RMB</div>
<div class="fontclass">#icon2-RMB</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-satisfy"></use>
</svg>
<div class="name">satisfy</div>
<div class="fontclass">#icon2-satisfy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-safe"></use>
</svg>
<div class="name">safe</div>
<div class="fontclass">#icon2-safe</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-rule"></use>
</svg>
<div class="name">rule</div>
<div class="fontclass">#icon2-rule</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-save"></use>
</svg>
<div class="name">save</div>
<div class="fontclass">#icon2-save</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-scan"></use>
</svg>
<div class="name">scan</div>
<div class="fontclass">#icon2-scan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-schedule"></use>
</svg>
<div class="name">schedule</div>
<div class="fontclass">#icon2-schedule</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-screwdriver"></use>
</svg>
<div class="name">screwdriver</div>
<div class="fontclass">#icon2-screwdriver</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-search"></use>
</svg>
<div class="name">search</div>
<div class="fontclass">#icon2-search</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-service"></use>
</svg>
<div class="name">service</div>
<div class="fontclass">#icon2-service</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-security"></use>
</svg>
<div class="name">security</div>
<div class="fontclass">#icon2-security</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-settlement"></use>
</svg>
<div class="name">settlement</div>
<div class="fontclass">#icon2-settlement</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-setup"></use>
</svg>
<div class="name">setup</div>
<div class="fontclass">#icon2-setup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-share"></use>
</svg>
<div class="name">share</div>
<div class="fontclass">#icon2-share</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-setting"></use>
</svg>
<div class="name">setting</div>
<div class="fontclass">#icon2-setting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shield"></use>
</svg>
<div class="name">shield</div>
<div class="fontclass">#icon2-shield</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shopping-cart"></use>
</svg>
<div class="name">shopping-cart</div>
<div class="fontclass">#icon2-shopping-cart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-signed"></use>
</svg>
<div class="name">signed</div>
<div class="fontclass">#icon2-signed</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shrink"></use>
</svg>
<div class="name">shrink</div>
<div class="fontclass">#icon2-shrink</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shrink-r"></use>
</svg>
<div class="name">shrink-r</div>
<div class="fontclass">#icon2-shrink-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shoppingbag"></use>
</svg>
<div class="name">shoppingbag</div>
<div class="fontclass">#icon2-shoppingbag</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-similar-product"></use>
</svg>
<div class="name">similar-product</div>
<div class="fontclass">#icon2-similar-product</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-slide"></use>
</svg>
<div class="name">slide</div>
<div class="fontclass">#icon2-slide</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-sort"></use>
</svg>
<div class="name">sort</div>
<div class="fontclass">#icon2-sort</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-stop"></use>
</svg>
<div class="name">stop</div>
<div class="fontclass">#icon2-stop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-stock"></use>
</svg>
<div class="name">stock</div>
<div class="fontclass">#icon2-stock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-standard"></use>
</svg>
<div class="name">standard</div>
<div class="fontclass">#icon2-standard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-sorting"></use>
</svg>
<div class="name">sorting</div>
<div class="fontclass">#icon2-sorting</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-storage"></use>
</svg>
<div class="name">storage</div>
<div class="fontclass">#icon2-storage</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-store"></use>
</svg>
<div class="name">store</div>
<div class="fontclass">#icon2-store</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-tag-subscript"></use>
</svg>
<div class="name">tag-subscript</div>
<div class="fontclass">#icon2-tag-subscript</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-tag-selected"></use>
</svg>
<div class="name">tag-selected</div>
<div class="fontclass">#icon2-tag-selected</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-table"></use>
</svg>
<div class="name">table</div>
<div class="fontclass">#icon2-table</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-survey"></use>
</svg>
<div class="name">survey</div>
<div class="fontclass">#icon2-survey</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-sync"></use>
</svg>
<div class="name">sync</div>
<div class="fontclass">#icon2-sync</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-tag"></use>
</svg>
<div class="name">tag</div>
<div class="fontclass">#icon2-tag</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-task"></use>
</svg>
<div class="name">task</div>
<div class="fontclass">#icon2-task</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-top"></use>
</svg>
<div class="name">top</div>
<div class="fontclass">#icon2-top</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-time"></use>
</svg>
<div class="name">time</div>
<div class="fontclass">#icon2-time</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-transfer-station"></use>
</svg>
<div class="name">transfer-station</div>
<div class="fontclass">#icon2-transfer-station</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-text"></use>
</svg>
<div class="name">text</div>
<div class="fontclass">#icon2-text</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-trend-chart"></use>
</svg>
<div class="name">trend-chart</div>
<div class="fontclass">#icon2-trend-chart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-template"></use>
</svg>
<div class="name">template</div>
<div class="fontclass">#icon2-template</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-unlock"></use>
</svg>
<div class="name">unlock</div>
<div class="fontclass">#icon2-unlock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-upload"></use>
</svg>
<div class="name">upload</div>
<div class="fontclass">#icon2-upload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-unsatisfy"></use>
</svg>
<div class="name">unsatisfy</div>
<div class="fontclass">#icon2-unsatisfy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-unseen"></use>
</svg>
<div class="name">unseen</div>
<div class="fontclass">#icon2-unseen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-user-r"></use>
</svg>
<div class="name">user-r</div>
<div class="fontclass">#icon2-user-r</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-user"></use>
</svg>
<div class="name">user</div>
<div class="fontclass">#icon2-user</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-usually"></use>
</svg>
<div class="name">usually</div>
<div class="fontclass">#icon2-usually</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-vedio"></use>
</svg>
<div class="name">vedio</div>
<div class="fontclass">#icon2-vedio</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-vertical-expansion"></use>
</svg>
<div class="name">vertical-expansion</div>
<div class="fontclass">#icon2-vertical-expansion</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-vertical-retraction"></use>
</svg>
<div class="name">vertical-retraction</div>
<div class="fontclass">#icon2-vertical-retraction</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-visible"></use>
</svg>
<div class="name">visible</div>
<div class="fontclass">#icon2-visible</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-view-list"></use>
</svg>
<div class="name">view-list</div>
<div class="fontclass">#icon2-view-list</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-volume"></use>
</svg>
<div class="name">volume</div>
<div class="fontclass">#icon2-volume</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-view-matrix"></use>
</svg>
<div class="name">view-matrix</div>
<div class="fontclass">#icon2-view-matrix</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-volumeopen"></use>
</svg>
<div class="name">volumeopen</div>
<div class="fontclass">#icon2-volumeopen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-wallet"></use>
</svg>
<div class="name">wallet</div>
<div class="fontclass">#icon2-wallet</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-wave"></use>
</svg>
<div class="name">wave</div>
<div class="fontclass">#icon2-wave</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-warehouse"></use>
</svg>
<div class="name">warehouse</div>
<div class="fontclass">#icon2-warehouse</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-word"></use>
</svg>
<div class="name">word</div>
<div class="fontclass">#icon2-word</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-column-o"></use>
</svg>
<div class="name">3column-o</div>
<div class="fontclass">#icon2-column-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-add-o"></use>
</svg>
<div class="name">add-o</div>
<div class="fontclass">#icon2-add-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-column-o1"></use>
</svg>
<div class="name">4column-o</div>
<div class="fontclass">#icon2-column-o1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-add-s-o"></use>
</svg>
<div class="name">add-s-o</div>
<div class="fontclass">#icon2-add-s-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-add-r-o"></use>
</svg>
<div class="name">add-r-o</div>
<div class="fontclass">#icon2-add-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-air-drop-o"></use>
</svg>
<div class="name">air-drop-o</div>
<div class="fontclass">#icon2-air-drop-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-app-o"></use>
</svg>
<div class="name">app-o</div>
<div class="fontclass">#icon2-app-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-double-right-o"></use>
</svg>
<div class="name">arrow-double-right-o</div>
<div class="fontclass">#icon2-arrow-double-right-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-also-loan-o"></use>
</svg>
<div class="name">also-loan-o</div>
<div class="fontclass">#icon2-also-loan-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-air-o"></use>
</svg>
<div class="name">air-o</div>
<div class="fontclass">#icon2-air-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-double-left-o"></use>
</svg>
<div class="name">arrow-double-left-o</div>
<div class="fontclass">#icon2-arrow-double-left-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-ascending-o"></use>
</svg>
<div class="name">ascending-o</div>
<div class="fontclass">#icon2-ascending-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-atm-o"></use>
</svg>
<div class="name">atm-o</div>
<div class="fontclass">#icon2-atm-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-back-o"></use>
</svg>
<div class="name">back-o</div>
<div class="fontclass">#icon2-back-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-attendance-o"></use>
</svg>
<div class="name">attendance-o</div>
<div class="fontclass">#icon2-attendance-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-atm-away-o"></use>
</svg>
<div class="name">atm-away-o</div>
<div class="fontclass">#icon2-atm-away-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-back-r-o"></use>
</svg>
<div class="name">back-r-o</div>
<div class="fontclass">#icon2-back-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bad-o"></use>
</svg>
<div class="name">bad-o</div>
<div class="fontclass">#icon2-bad-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bill-o"></use>
</svg>
<div class="name">bill-o</div>
<div class="fontclass">#icon2-bill-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bank-card-o"></use>
</svg>
<div class="name">bank-card-o</div>
<div class="fontclass">#icon2-bank-card-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bar-chart-o"></use>
</svg>
<div class="name">bar-chart-o</div>
<div class="fontclass">#icon2-bar-chart-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-box-o"></use>
</svg>
<div class="name">box-o</div>
<div class="fontclass">#icon2-box-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-business-o"></use>
</svg>
<div class="name">business-o</div>
<div class="fontclass">#icon2-business-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-bad-r-o"></use>
</svg>
<div class="name">bad-r-o</div>
<div class="fontclass">#icon2-bad-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-businesscard-o"></use>
</svg>
<div class="name">businesscard-o</div>
<div class="fontclass">#icon2-businesscard-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-building-o"></use>
</svg>
<div class="name">building-o</div>
<div class="fontclass">#icon2-building-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-calculator-o"></use>
</svg>
<div class="name">calculator-o</div>
<div class="fontclass">#icon2-calculator-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-camera-o"></use>
</svg>
<div class="name">camera-o</div>
<div class="fontclass">#icon2-camera-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-cangneishicao-o"></use>
</svg>
<div class="name">cangneishicao-o</div>
<div class="fontclass">#icon2-cangneishicao-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-car-o"></use>
</svg>
<div class="name">car-o</div>
<div class="fontclass">#icon2-car-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-calendar-o"></use>
</svg>
<div class="name">calendar-o</div>
<div class="fontclass">#icon2-calendar-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-chat-o"></use>
</svg>
<div class="name">chat-o</div>
<div class="fontclass">#icon2-chat-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-checkbox-selected-o"></use>
</svg>
<div class="name">checkbox-selected-o</div>
<div class="fontclass">#icon2-checkbox-selected-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-checkbox-o"></use>
</svg>
<div class="name">checkbox-o</div>
<div class="fontclass">#icon2-checkbox-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-clock-o"></use>
</svg>
<div class="name">clock-o</div>
<div class="fontclass">#icon2-clock-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-check-o"></use>
</svg>
<div class="name">check-o</div>
<div class="fontclass">#icon2-check-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-Chinese-o"></use>
</svg>
<div class="name">Chinese-o</div>
<div class="fontclass">#icon2-Chinese-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-close-o"></use>
</svg>
<div class="name">close-o</div>
<div class="fontclass">#icon2-close-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-commodity-o"></use>
</svg>
<div class="name">commodity-o</div>
<div class="fontclass">#icon2-commodity-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-complain-o"></use>
</svg>
<div class="name">complain-o</div>
<div class="fontclass">#icon2-complain-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-compare-o"></use>
</svg>
<div class="name">compare-o</div>
<div class="fontclass">#icon2-compare-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-compass-o"></use>
</svg>
<div class="name">compass-o</div>
<div class="fontclass">#icon2-compass-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-complete-o"></use>
</svg>
<div class="name">complete-o</div>
<div class="fontclass">#icon2-complete-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-complete-r-o"></use>
</svg>
<div class="name">complete-r-o</div>
<div class="fontclass">#icon2-complete-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-copy-o"></use>
</svg>
<div class="name">copy-o</div>
<div class="fontclass">#icon2-copy-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-courier-o"></use>
</svg>
<div class="name">courier-o</div>
<div class="fontclass">#icon2-courier-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-CSR-o"></use>
</svg>
<div class="name">CSR-o</div>
<div class="fontclass">#icon2-CSR-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-create-bill-o"></use>
</svg>
<div class="name">create-bill-o</div>
<div class="fontclass">#icon2-create-bill-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-colthes-o"></use>
</svg>
<div class="name">colthes-o</div>
<div class="fontclass">#icon2-colthes-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-cut-o"></use>
</svg>
<div class="name">cut-o</div>
<div class="fontclass">#icon2-cut-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-delete-o"></use>
</svg>
<div class="name">delete-o</div>
<div class="fontclass">#icon2-delete-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-dashboard-o"></use>
</svg>
<div class="name">dashboard-o</div>
<div class="fontclass">#icon2-dashboard-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-descending-o"></use>
</svg>
<div class="name">descending-o</div>
<div class="fontclass">#icon2-descending-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-delivery-o"></use>
</svg>
<div class="name">delivery-o</div>
<div class="fontclass">#icon2-delivery-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-dialog-o"></use>
</svg>
<div class="name">dialog-o</div>
<div class="fontclass">#icon2-dialog-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-customs-o"></use>
</svg>
<div class="name">customs-o</div>
<div class="fontclass">#icon2-customs-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-diamond-o"></use>
</svg>
<div class="name">diamond-o</div>
<div class="fontclass">#icon2-diamond-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-dollar-o"></use>
</svg>
<div class="name">dollar-o</div>
<div class="fontclass">#icon2-dollar-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-ding-o"></use>
</svg>
<div class="name">ding-o</div>
<div class="fontclass">#icon2-ding-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-download-o"></use>
</svg>
<div class="name">download-o</div>
<div class="fontclass">#icon2-download-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-duihua-o"></use>
</svg>
<div class="name">duihua-o</div>
<div class="fontclass">#icon2-duihua-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-edit-o"></use>
</svg>
<div class="name">edit-o</div>
<div class="fontclass">#icon2-edit-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-error-r-o"></use>
</svg>
<div class="name">error-r-o</div>
<div class="fontclass">#icon2-error-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-electronics-o"></use>
</svg>
<div class="name">electronics-o</div>
<div class="fontclass">#icon2-electronics-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-enclosure-o"></use>
</svg>
<div class="name">enclosure-o</div>
<div class="fontclass">#icon2-enclosure-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-English-o"></use>
</svg>
<div class="name">English-o</div>
<div class="fontclass">#icon2-English-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-drop-o"></use>
</svg>
<div class="name">drop-o</div>
<div class="fontclass">#icon2-drop-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-error-s-o"></use>
</svg>
<div class="name">error-s-o</div>
<div class="fontclass">#icon2-error-s-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exchange-o"></use>
</svg>
<div class="name">exchange-o</div>
<div class="fontclass">#icon2-exchange-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exclamatory-mark-t-o"></use>
</svg>
<div class="name">exclamatory-mark-t-o</div>
<div class="fontclass">#icon2-exclamatory-mark-t-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exclamatory-mark-r-o"></use>
</svg>
<div class="name">exclamatory-mark-r-o</div>
<div class="fontclass">#icon2-exclamatory-mark-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exclamatory-mark-o"></use>
</svg>
<div class="name">exclamatory-mark-o</div>
<div class="fontclass">#icon2-exclamatory-mark-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-extend-o"></use>
</svg>
<div class="name">extend-o</div>
<div class="fontclass">#icon2-extend-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-exit-fullscreen-o"></use>
</svg>
<div class="name">exit-fullscreen-o</div>
<div class="fontclass">#icon2-exit-fullscreen-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-filter-o"></use>
</svg>
<div class="name">filter-o</div>
<div class="fontclass">#icon2-filter-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-first-page-o"></use>
</svg>
<div class="name">first-page-o</div>
<div class="fontclass">#icon2-first-page-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-flash-lamp-auto-o"></use>
</svg>
<div class="name">flash-lamp-auto-o</div>
<div class="fontclass">#icon2-flash-lamp-auto-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-extend-r-o"></use>
</svg>
<div class="name">extend-r-o</div>
<div class="fontclass">#icon2-extend-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-favorites-o"></use>
</svg>
<div class="name">favorites-o</div>
<div class="fontclass">#icon2-favorites-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-finance-o"></use>
</svg>
<div class="name">finance-o</div>
<div class="fontclass">#icon2-finance-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-flash-lamp-o"></use>
</svg>
<div class="name">flash-lamp-o</div>
<div class="fontclass">#icon2-flash-lamp-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-folder-o"></use>
</svg>
<div class="name">folder-o</div>
<div class="fontclass">#icon2-folder-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-flash-lamp-off-o"></use>
</svg>
<div class="name">flash-lamp-off-o</div>
<div class="fontclass">#icon2-flash-lamp-off-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forward-o"></use>
</svg>
<div class="name">forward-o</div>
<div class="fontclass">#icon2-forward-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forbidden-o"></use>
</svg>
<div class="name">forbidden-o</div>
<div class="fontclass">#icon2-forbidden-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forward-r-o"></use>
</svg>
<div class="name">forward-r-o</div>
<div class="fontclass">#icon2-forward-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-free-o"></use>
</svg>
<div class="name">free-o</div>
<div class="fontclass">#icon2-free-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-good-o"></use>
</svg>
<div class="name">good-o</div>
<div class="fontclass">#icon2-good-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-fullscreen-o"></use>
</svg>
<div class="name">fullscreen-o</div>
<div class="fontclass">#icon2-fullscreen-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-forward-sorting-o"></use>
</svg>
<div class="name">forward-sorting-o</div>
<div class="fontclass">#icon2-forward-sorting-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-gifts-o"></use>
</svg>
<div class="name">gifts-o</div>
<div class="fontclass">#icon2-gifts-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-good-r-o"></use>
</svg>
<div class="name">good-r-o</div>
<div class="fontclass">#icon2-good-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-home-o"></use>
</svg>
<div class="name">home-o</div>
<div class="fontclass">#icon2-home-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-group-o"></use>
</svg>
<div class="name">group-o</div>
<div class="fontclass">#icon2-group-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-history-o"></use>
</svg>
<div class="name">history-o</div>
<div class="fontclass">#icon2-history-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-horizontal-retractio1"></use>
</svg>
<div class="name">horizontal-retractio</div>
<div class="fontclass">#icon2-horizontal-retractio1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-horizontal-expansion1"></use>
</svg>
<div class="name">horizontal-expansion</div>
<div class="fontclass">#icon2-horizontal-expansion1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-horn-o"></use>
</svg>
<div class="name">horn-o</div>
<div class="fontclass">#icon2-horn-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-image-text-o"></use>
</svg>
<div class="name">image-text-o</div>
<div class="fontclass">#icon2-image-text-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-image-o"></use>
</svg>
<div class="name">image-o</div>
<div class="fontclass">#icon2-image-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-info-o"></use>
</svg>
<div class="name">info-o</div>
<div class="fontclass">#icon2-info-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-increase-o"></use>
</svg>
<div class="name">increase-o</div>
<div class="fontclass">#icon2-increase-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-info-r-o"></use>
</svg>
<div class="name">info-r-o</div>
<div class="fontclass">#icon2-info-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-import-o"></use>
</svg>
<div class="name">import-o</div>
<div class="fontclass">#icon2-import-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-information-o"></use>
</svg>
<div class="name">information-o</div>
<div class="fontclass">#icon2-information-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-key-o"></use>
</svg>
<div class="name">key-o</div>
<div class="fontclass">#icon2-key-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-keyboard-o"></use>
</svg>
<div class="name">keyboard-o</div>
<div class="fontclass">#icon2-keyboard-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-international-o"></use>
</svg>
<div class="name">international-o</div>
<div class="fontclass">#icon2-international-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-last-page-o"></use>
</svg>
<div class="name">last-page-o</div>
<div class="fontclass">#icon2-last-page-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-left-o"></use>
</svg>
<div class="name">left-o</div>
<div class="fontclass">#icon2-left-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-lefy-exchange-o"></use>
</svg>
<div class="name">lefy-exchange-o</div>
<div class="fontclass">#icon2-lefy-exchange-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-left-sorting-o"></use>
</svg>
<div class="name">left-sorting-o</div>
<div class="fontclass">#icon2-left-sorting-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-letter-o"></use>
</svg>
<div class="name">letter-o</div>
<div class="fontclass">#icon2-letter-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-light-o"></use>
</svg>
<div class="name">light-o</div>
<div class="fontclass">#icon2-light-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-like-o"></use>
</svg>
<div class="name">like-o</div>
<div class="fontclass">#icon2-like-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-line-o"></use>
</svg>
<div class="name">line-o</div>
<div class="fontclass">#icon2-line-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-link-o"></use>
</svg>
<div class="name">link-o</div>
<div class="fontclass">#icon2-link-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-load-o"></use>
</svg>
<div class="name">load-o</div>
<div class="fontclass">#icon2-load-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-loading--o"></use>
</svg>
<div class="name">loading-1-o</div>
<div class="fontclass">#icon2-loading--o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-loading--o1"></use>
</svg>
<div class="name">loading-2-o</div>
<div class="fontclass">#icon2-loading--o1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-loan-o"></use>
</svg>
<div class="name">loan-o</div>
<div class="fontclass">#icon2-loan-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-location-o"></use>
</svg>
<div class="name">location-o</div>
<div class="fontclass">#icon2-location-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-locker-o"></use>
</svg>
<div class="name">locker-o</div>
<div class="fontclass">#icon2-locker-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-logistics-o"></use>
</svg>
<div class="name">logistics-o</div>
<div class="fontclass">#icon2-logistics-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-lock-o"></use>
</svg>
<div class="name">lock-o</div>
<div class="fontclass">#icon2-lock-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-macbook-o"></use>
</svg>
<div class="name">macbook-o</div>
<div class="fontclass">#icon2-macbook-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-map--o"></use>
</svg>
<div class="name">map-1-o</div>
<div class="fontclass">#icon2-map--o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-logout-o"></use>
</svg>
<div class="name">logout-o</div>
<div class="fontclass">#icon2-logout-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-map--o1"></use>
</svg>
<div class="name">map-2-o</div>
<div class="fontclass">#icon2-map--o1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-minus-o"></use>
</svg>
<div class="name">minus-o</div>
<div class="fontclass">#icon2-minus-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-mic-o"></use>
</svg>
<div class="name">mic-o</div>
<div class="fontclass">#icon2-mic-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-mobile-Phone-o"></use>
</svg>
<div class="name">mobile-Phone-o</div>
<div class="fontclass">#icon2-mobile-Phone-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-minus-r-o"></use>
</svg>
<div class="name">minus-r-o</div>
<div class="fontclass">#icon2-minus-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-minus-s-o"></use>
</svg>
<div class="name">minus-s-o</div>
<div class="fontclass">#icon2-minus-s-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-money-bill-o"></use>
</svg>
<div class="name">money-bill-o</div>
<div class="fontclass">#icon2-money-bill-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-money-o"></use>
</svg>
<div class="name">money-o</div>
<div class="fontclass">#icon2-money-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-moneys-o"></use>
</svg>
<div class="name">moneys-o</div>
<div class="fontclass">#icon2-moneys-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-monitor-o"></use>
</svg>
<div class="name">monitor-o</div>
<div class="fontclass">#icon2-monitor-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-more-vertical-o"></use>
</svg>
<div class="name">more-vertical-o</div>
<div class="fontclass">#icon2-more-vertical-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-nav-list-o"></use>
</svg>
<div class="name">nav-list-o</div>
<div class="fontclass">#icon2-nav-list-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-navigation-o"></use>
</svg>
<div class="name">navigation-o</div>
<div class="fontclass">#icon2-navigation-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-network-o"></use>
</svg>
<div class="name">network-o</div>
<div class="fontclass">#icon2-network-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-more-transverse-o"></use>
</svg>
<div class="name">more-transverse-o</div>
<div class="fontclass">#icon2-more-transverse-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-news-o"></use>
</svg>
<div class="name">news-o</div>
<div class="fontclass">#icon2-news-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-no-attendance-o"></use>
</svg>
<div class="name">no-attendance-o</div>
<div class="fontclass">#icon2-no-attendance-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-notice-o"></use>
</svg>
<div class="name">notice-o</div>
<div class="fontclass">#icon2-notice-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-not-sign-o"></use>
</svg>
<div class="name">not-sign-o</div>
<div class="fontclass">#icon2-not-sign-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-open-package-o"></use>
</svg>
<div class="name">open-package-o</div>
<div class="fontclass">#icon2-open-package-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-office-o"></use>
</svg>
<div class="name">office-o</div>
<div class="fontclass">#icon2-office-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-operation-o"></use>
</svg>
<div class="name">operation-o</div>
<div class="fontclass">#icon2-operation-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-organization-o"></use>
</svg>
<div class="name">organization-o</div>
<div class="fontclass">#icon2-organization-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-package-o"></use>
</svg>
<div class="name">package-o</div>
<div class="fontclass">#icon2-package-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-paly-o"></use>
</svg>
<div class="name">paly-o</div>
<div class="fontclass">#icon2-paly-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-pause-o"></use>
</svg>
<div class="name">pause-o</div>
<div class="fontclass">#icon2-pause-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-paste-o"></use>
</svg>
<div class="name">paste-o</div>
<div class="fontclass">#icon2-paste-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-pie-chart-o"></use>
</svg>
<div class="name">pie-chart-o</div>
<div class="fontclass">#icon2-pie-chart-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-PDA-o"></use>
</svg>
<div class="name">PDA-o</div>
<div class="fontclass">#icon2-PDA-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-phone-r-o"></use>
</svg>
<div class="name">phone-r-o</div>
<div class="fontclass">#icon2-phone-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-ppt-o"></use>
</svg>
<div class="name">ppt-o</div>
<div class="fontclass">#icon2-ppt-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-power-o"></use>
</svg>
<div class="name">power-o</div>
<div class="fontclass">#icon2-power-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-position-o"></use>
</svg>
<div class="name">position-o</div>
<div class="fontclass">#icon2-position-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-prine-o"></use>
</svg>
<div class="name">prine-o</div>
<div class="fontclass">#icon2-prine-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-quality-o"></use>
</svg>
<div class="name">quality-o</div>
<div class="fontclass">#icon2-quality-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-process-o"></use>
</svg>
<div class="name">process-o</div>
<div class="fontclass">#icon2-process-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-question-mark-o"></use>
</svg>
<div class="name">question-mark-o</div>
<div class="fontclass">#icon2-question-mark-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-question-mark-r-o"></use>
</svg>
<div class="name">question-mark-r-o</div>
<div class="fontclass">#icon2-question-mark-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-radar-o"></use>
</svg>
<div class="name">radar-o</div>
<div class="fontclass">#icon2-radar-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-Raidobox-o"></use>
</svg>
<div class="name">Raidobox-o</div>
<div class="fontclass">#icon2-Raidobox-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-Raidobox-selectedRai1"></use>
</svg>
<div class="name">Raidobox-selectedRai</div>
<div class="fontclass">#icon2-Raidobox-selectedRai1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-red-packet-o"></use>
</svg>
<div class="name">red-packet-o</div>
<div class="fontclass">#icon2-red-packet-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-refresh-o"></use>
</svg>
<div class="name">refresh-o</div>
<div class="fontclass">#icon2-refresh-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-register-o"></use>
</svg>
<div class="name">register-o</div>
<div class="fontclass">#icon2-register-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-refund-o"></use>
</svg>
<div class="name">refund-o</div>
<div class="fontclass">#icon2-refund-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-resource-o"></use>
</svg>
<div class="name">resource-o</div>
<div class="fontclass">#icon2-resource-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-relationship-o"></use>
</svg>
<div class="name">relationship-o</div>
<div class="fontclass">#icon2-relationship-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-reverse-sorting-o"></use>
</svg>
<div class="name">reverse-sorting-o</div>
<div class="fontclass">#icon2-reverse-sorting-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-right-exchange-o"></use>
</svg>
<div class="name">right-exchange-o</div>
<div class="fontclass">#icon2-right-exchange-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-rise-o"></use>
</svg>
<div class="name">rise-o</div>
<div class="fontclass">#icon2-rise-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-rule-o"></use>
</svg>
<div class="name">rule-o</div>
<div class="fontclass">#icon2-rule-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-right-o"></use>
</svg>
<div class="name">right-o</div>
<div class="fontclass">#icon2-right-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-right-sorting-o"></use>
</svg>
<div class="name">right-sorting-o</div>
<div class="fontclass">#icon2-right-sorting-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-RMB-o"></use>
</svg>
<div class="name">RMB-o</div>
<div class="fontclass">#icon2-RMB-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-safe-o"></use>
</svg>
<div class="name">safe-o</div>
<div class="fontclass">#icon2-safe-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-scan-o"></use>
</svg>
<div class="name">scan-o</div>
<div class="fontclass">#icon2-scan-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-satisfy-o"></use>
</svg>
<div class="name">satisfy-o</div>
<div class="fontclass">#icon2-satisfy-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-save-o"></use>
</svg>
<div class="name">save-o</div>
<div class="fontclass">#icon2-save-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-screwdriver-o"></use>
</svg>
<div class="name">screwdriver-o</div>
<div class="fontclass">#icon2-screwdriver-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-schedule-o"></use>
</svg>
<div class="name">schedule-o</div>
<div class="fontclass">#icon2-schedule-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-search-o"></use>
</svg>
<div class="name">search-o</div>
<div class="fontclass">#icon2-search-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-security-o"></use>
</svg>
<div class="name">security-o</div>
<div class="fontclass">#icon2-security-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-settlement-o"></use>
</svg>
<div class="name">settlement-o</div>
<div class="fontclass">#icon2-settlement-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-service-o"></use>
</svg>
<div class="name">service-o</div>
<div class="fontclass">#icon2-service-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-setting-o"></use>
</svg>
<div class="name">setting-o</div>
<div class="fontclass">#icon2-setting-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-setup-o"></use>
</svg>
<div class="name">setup-o</div>
<div class="fontclass">#icon2-setup-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shoppingbag-o"></use>
</svg>
<div class="name">shoppingbag-o</div>
<div class="fontclass">#icon2-shoppingbag-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-share-o"></use>
</svg>
<div class="name">share-o</div>
<div class="fontclass">#icon2-share-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shopping-cart-o"></use>
</svg>
<div class="name">shopping-cart-o</div>
<div class="fontclass">#icon2-shopping-cart-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shield-o"></use>
</svg>
<div class="name">shield-o</div>
<div class="fontclass">#icon2-shield-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shrink-r-o"></use>
</svg>
<div class="name">shrink-r-o</div>
<div class="fontclass">#icon2-shrink-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-shrink-o"></use>
</svg>
<div class="name">shrink-o</div>
<div class="fontclass">#icon2-shrink-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-signed-o"></use>
</svg>
<div class="name">signed-o</div>
<div class="fontclass">#icon2-signed-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-similar-product-o"></use>
</svg>
<div class="name">similar-product-o</div>
<div class="fontclass">#icon2-similar-product-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-sort-o"></use>
</svg>
<div class="name">sort-o</div>
<div class="fontclass">#icon2-sort-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-slide-o"></use>
</svg>
<div class="name">slide-o</div>
<div class="fontclass">#icon2-slide-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-sorting-o"></use>
</svg>
<div class="name">sorting-o</div>
<div class="fontclass">#icon2-sorting-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-stock-o"></use>
</svg>
<div class="name">stock-o</div>
<div class="fontclass">#icon2-stock-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-stop-o"></use>
</svg>
<div class="name">stop-o</div>
<div class="fontclass">#icon2-stop-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-standard-o"></use>
</svg>
<div class="name">standard-o</div>
<div class="fontclass">#icon2-standard-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-storage-o"></use>
</svg>
<div class="name">storage-o</div>
<div class="fontclass">#icon2-storage-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-survey-o"></use>
</svg>
<div class="name">survey-o</div>
<div class="fontclass">#icon2-survey-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-store-o"></use>
</svg>
<div class="name">store-o</div>
<div class="fontclass">#icon2-store-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-table-o"></use>
</svg>
<div class="name">table-o</div>
<div class="fontclass">#icon2-table-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-tag-o"></use>
</svg>
<div class="name">tag-o</div>
<div class="fontclass">#icon2-tag-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-tag-selected-o"></use>
</svg>
<div class="name">tag-selected-o</div>
<div class="fontclass">#icon2-tag-selected-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-sync-o"></use>
</svg>
<div class="name">sync-o</div>
<div class="fontclass">#icon2-sync-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-task-o"></use>
</svg>
<div class="name">task-o</div>
<div class="fontclass">#icon2-task-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-tag-subscript-o"></use>
</svg>
<div class="name">tag-subscript-o</div>
<div class="fontclass">#icon2-tag-subscript-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-template-o"></use>
</svg>
<div class="name">template-o</div>
<div class="fontclass">#icon2-template-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-text-o"></use>
</svg>
<div class="name">text-o</div>
<div class="fontclass">#icon2-text-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-time-o"></use>
</svg>
<div class="name">time-o</div>
<div class="fontclass">#icon2-time-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-top-o"></use>
</svg>
<div class="name">top-o</div>
<div class="fontclass">#icon2-top-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-transfer-station-o"></use>
</svg>
<div class="name">transfer-station-o</div>
<div class="fontclass">#icon2-transfer-station-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-trend-chart-o"></use>
</svg>
<div class="name">trend-chart-o</div>
<div class="fontclass">#icon2-trend-chart-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-unlock-o"></use>
</svg>
<div class="name">unlock-o</div>
<div class="fontclass">#icon2-unlock-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-unsatisfy-o"></use>
</svg>
<div class="name">unsatisfy-o</div>
<div class="fontclass">#icon2-unsatisfy-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-user-o"></use>
</svg>
<div class="name">user-o</div>
<div class="fontclass">#icon2-user-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-unseen-o"></use>
</svg>
<div class="name">unseen-o</div>
<div class="fontclass">#icon2-unseen-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-upload-o"></use>
</svg>
<div class="name">upload-o</div>
<div class="fontclass">#icon2-upload-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-usually-o"></use>
</svg>
<div class="name">usually-o</div>
<div class="fontclass">#icon2-usually-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-vedio-o"></use>
</svg>
<div class="name">vedio-o</div>
<div class="fontclass">#icon2-vedio-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-user-r-o"></use>
</svg>
<div class="name">user-r-o</div>
<div class="fontclass">#icon2-user-r-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-view-list-o"></use>
</svg>
<div class="name">view-list-o</div>
<div class="fontclass">#icon2-view-list-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-vertical-expansion-o"></use>
</svg>
<div class="name">vertical-expansion-o</div>
<div class="fontclass">#icon2-vertical-expansion-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-vertical-retraction-"></use>
</svg>
<div class="name">vertical-retraction-</div>
<div class="fontclass">#icon2-vertical-retraction-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-volume-o"></use>
</svg>
<div class="name">volume-o</div>
<div class="fontclass">#icon2-volume-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-view-matrix-o"></use>
</svg>
<div class="name">view-matrix-o</div>
<div class="fontclass">#icon2-view-matrix-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-visible-o"></use>
</svg>
<div class="name">visible-o</div>
<div class="fontclass">#icon2-visible-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-wallet-o"></use>
</svg>
<div class="name">wallet-o</div>
<div class="fontclass">#icon2-wallet-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-volumeopen-o"></use>
</svg>
<div class="name">volumeopen-o</div>
<div class="fontclass">#icon2-volumeopen-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-warehouse-o"></use>
</svg>
<div class="name">warehouse-o</div>
<div class="fontclass">#icon2-warehouse-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-wave-o"></use>
</svg>
<div class="name">wave-o</div>
<div class="fontclass">#icon2-wave-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-word-o"></use>
</svg>
<div class="name">word-o</div>
<div class="fontclass">#icon2-word-o</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-down"></use>
</svg>
<div class="name">arrow-down</div>
<div class="fontclass">#icon2-arrow-down</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-left"></use>
</svg>
<div class="name">arrow-left</div>
<div class="fontclass">#icon2-arrow-left</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-right"></use>
</svg>
<div class="name">arrow-right</div>
<div class="fontclass">#icon2-arrow-right</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-up"></use>
</svg>
<div class="name">arrow-up</div>
<div class="fontclass">#icon2-arrow-up</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-down1"></use>
</svg>
<div class="name">arrow-down</div>
<div class="fontclass">#icon2-arrow-down1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-right1"></use>
</svg>
<div class="name">arrow-right</div>
<div class="fontclass">#icon2-arrow-right1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-left1"></use>
</svg>
<div class="name">arrow-left</div>
<div class="fontclass">#icon2-arrow-left1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-arrow-up1"></use>
</svg>
<div class="name">arrow-up</div>
<div class="fontclass">#icon2-arrow-up1</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">"#icon2-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>