vue-moo
Version:
moo
2,448 lines • 101 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-3dcube"></use>
</svg>
<div class="name">3d-cube</div>
<div class="fontclass">#icon-3dcube</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-adjust"></use>
</svg>
<div class="name">adjust</div>
<div class="fontclass">#icon-adjust</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-airplane"></use>
</svg>
<div class="name">air-plane</div>
<div class="fontclass">#icon-airplane</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-alarmclock"></use>
</svg>
<div class="name">alarm-clock</div>
<div class="fontclass">#icon-alarmclock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-animalfootprint"></use>
</svg>
<div class="name">animal-footprint</div>
<div class="fontclass">#icon-animalfootprint</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowcurveleft"></use>
</svg>
<div class="name">arrow-curve-left</div>
<div class="fontclass">#icon-arrowcurveleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowcurverecycle"></use>
</svg>
<div class="name">arrow-curve-recycle</div>
<div class="fontclass">#icon-arrowcurverecycle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowcurveright"></use>
</svg>
<div class="name">arrow-curve-right</div>
<div class="fontclass">#icon-arrowcurveright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowcycle"></use>
</svg>
<div class="name">arrow-cycle</div>
<div class="fontclass">#icon-arrowcycle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowcycling"></use>
</svg>
<div class="name">arrow-cycling</div>
<div class="fontclass">#icon-arrowcycling</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdown"></use>
</svg>
<div class="name">arrow-down</div>
<div class="fontclass">#icon-arrowdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdownbig"></use>
</svg>
<div class="name">arrow-down-big</div>
<div class="fontclass">#icon-arrowdownbig</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdownbold"></use>
</svg>
<div class="name">arrow-down-bold</div>
<div class="fontclass">#icon-arrowdownbold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdownboldround"></use>
</svg>
<div class="name">arrow-down-bold-round</div>
<div class="fontclass">#icon-arrowdownboldround</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdownlight"></use>
</svg>
<div class="name">arrow-down-light</div>
<div class="fontclass">#icon-arrowdownlight</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowdownthin"></use>
</svg>
<div class="name">arrow-down-thin</div>
<div class="fontclass">#icon-arrowdownthin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowfilldown"></use>
</svg>
<div class="name">arrow-fill-down</div>
<div class="fontclass">#icon-arrowfilldown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowfillleft"></use>
</svg>
<div class="name">arrow-fill-left</div>
<div class="fontclass">#icon-arrowfillleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowfillright"></use>
</svg>
<div class="name">arrow-fill-right</div>
<div class="fontclass">#icon-arrowfillright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowfillup"></use>
</svg>
<div class="name">arrow-fill-up</div>
<div class="fontclass">#icon-arrowfillup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowleftbig"></use>
</svg>
<div class="name">arrow-left-big</div>
<div class="fontclass">#icon-arrowleftbig</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowleftbold"></use>
</svg>
<div class="name">arrow-left-bold</div>
<div class="fontclass">#icon-arrowleftbold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowleftboldround"></use>
</svg>
<div class="name">arrow-left-bold-round</div>
<div class="fontclass">#icon-arrowleftboldround</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowleftlight"></use>
</svg>
<div class="name">arrow-left-light</div>
<div class="fontclass">#icon-arrowleftlight</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowleftthin"></use>
</svg>
<div class="name">arrow-left-thin</div>
<div class="fontclass">#icon-arrowleftthin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowmultilinedown"></use>
</svg>
<div class="name">arrow-multi-line-down</div>
<div class="fontclass">#icon-arrowmultilinedown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowmultilineleft"></use>
</svg>
<div class="name">arrow-multi-line-left</div>
<div class="fontclass">#icon-arrowmultilineleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowmultilineright"></use>
</svg>
<div class="name">arrow-multi-line-right</div>
<div class="fontclass">#icon-arrowmultilineright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowmultilineup"></use>
</svg>
<div class="name">arrow-multi-line-up</div>
<div class="fontclass">#icon-arrowmultilineup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowobliquecontract"></use>
</svg>
<div class="name">arrow-oblique-contract</div>
<div class="fontclass">#icon-arrowobliquecontract</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowobliquecontractdirections"></use>
</svg>
<div class="name">arrow-oblique-contract-directions</div>
<div class="fontclass">#icon-arrowobliquecontractdirections</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowobliqueexpand"></use>
</svg>
<div class="name">arrow-oblique-expand</div>
<div class="fontclass">#icon-arrowobliqueexpand</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowobliqueexpanddirections"></use>
</svg>
<div class="name">arrow-oblique-expand-directions</div>
<div class="fontclass">#icon-arrowobliqueexpanddirections</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowright"></use>
</svg>
<div class="name">arrow-right</div>
<div class="fontclass">#icon-arrowright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowrightbig"></use>
</svg>
<div class="name">arrow-right-big</div>
<div class="fontclass">#icon-arrowrightbig</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowrightbold"></use>
</svg>
<div class="name">arrow-right-bold</div>
<div class="fontclass">#icon-arrowrightbold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowrightboldround"></use>
</svg>
<div class="name">arrow-right-bold-round</div>
<div class="fontclass">#icon-arrowrightboldround</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowrightlight"></use>
</svg>
<div class="name">arrow-right-light</div>
<div class="fontclass">#icon-arrowrightlight</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowrightthin"></use>
</svg>
<div class="name">arrow-right-thin</div>
<div class="fontclass">#icon-arrowrightthin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowup"></use>
</svg>
<div class="name">arrow-up</div>
<div class="fontclass">#icon-arrowup</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowupbig"></use>
</svg>
<div class="name">arrow-up-big</div>
<div class="fontclass">#icon-arrowupbig</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowupbold"></use>
</svg>
<div class="name">arrow-up-bold</div>
<div class="fontclass">#icon-arrowupbold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowupboldround"></use>
</svg>
<div class="name">arrow-up-bold-round</div>
<div class="fontclass">#icon-arrowupboldround</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowuplight"></use>
</svg>
<div class="name">arrow-up-light</div>
<div class="fontclass">#icon-arrowuplight</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-arrowupthin"></use>
</svg>
<div class="name">arrow-up-thin</div>
<div class="fontclass">#icon-arrowupthin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-atom"></use>
</svg>
<div class="name">atom</div>
<div class="fontclass">#icon-atom</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-axisrules"></use>
</svg>
<div class="name">axis-rules</div>
<div class="fontclass">#icon-axisrules</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-backward"></use>
</svg>
<div class="name">backward</div>
<div class="fontclass">#icon-backward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bag"></use>
</svg>
<div class="name">bag</div>
<div class="fontclass">#icon-bag</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bancircle"></use>
</svg>
<div class="name">ban-circle</div>
<div class="fontclass">#icon-bancircle</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-bezier"></use>
</svg>
<div class="name">bezier</div>
<div class="fontclass">#icon-bezier</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-blank"></use>
</svg>
<div class="name">blank</div>
<div class="fontclass">#icon-blank</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-blockmenu"></use>
</svg>
<div class="name">block-menu</div>
<div class="fontclass">#icon-blockmenu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bolt"></use>
</svg>
<div class="name">bolt</div>
<div class="fontclass">#icon-bolt</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-boxadd"></use>
</svg>
<div class="name">box-add</div>
<div class="fontclass">#icon-boxadd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-boxblank"></use>
</svg>
<div class="name">box-blank</div>
<div class="fontclass">#icon-boxblank</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-boxclose"></use>
</svg>
<div class="name">box-close</div>
<div class="fontclass">#icon-boxclose</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-boxremove"></use>
</svg>
<div class="name">box-remove</div>
<div class="fontclass">#icon-boxremove</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-browsersizes"></use>
</svg>
<div class="name">browser-sizes</div>
<div class="fontclass">#icon-browsersizes</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-brush"></use>
</svg>
<div class="name">brush</div>
<div class="fontclass">#icon-brush</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttonadd"></use>
</svg>
<div class="name">button-add</div>
<div class="fontclass">#icon-buttonadd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttoncheck"></use>
</svg>
<div class="name">button-check</div>
<div class="fontclass">#icon-buttoncheck</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttonclose"></use>
</svg>
<div class="name">button-close</div>
<div class="fontclass">#icon-buttonclose</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttonemail"></use>
</svg>
<div class="name">button-email</div>
<div class="fontclass">#icon-buttonemail</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttonexclamation"></use>
</svg>
<div class="name">button-exclamation</div>
<div class="fontclass">#icon-buttonexclamation</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttonminus"></use>
</svg>
<div class="name">button-minus</div>
<div class="fontclass">#icon-buttonminus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buttonquestion"></use>
</svg>
<div class="name">button-question</div>
<div class="fontclass">#icon-buttonquestion</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-cddvdrom"></use>
</svg>
<div class="name">cd-dvd-rom</div>
<div class="fontclass">#icon-cddvdrom</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chartdown"></use>
</svg>
<div class="name">chart-down</div>
<div class="fontclass">#icon-chartdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chat"></use>
</svg>
<div class="name">chat</div>
<div class="fontclass">#icon-chat</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-circles"></use>
</svg>
<div class="name">circles</div>
<div class="fontclass">#icon-circles</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clock"></use>
</svg>
<div class="name">clock</div>
<div class="fontclass">#icon-clock</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-cloudadd"></use>
</svg>
<div class="name">cloud-add</div>
<div class="fontclass">#icon-cloudadd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clouddownload"></use>
</svg>
<div class="name">cloud-download</div>
<div class="fontclass">#icon-clouddownload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cloudremove"></use>
</svg>
<div class="name">cloud-remove</div>
<div class="fontclass">#icon-cloudremove</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cloudupload"></use>
</svg>
<div class="name">cloud-upload</div>
<div class="fontclass">#icon-cloudupload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-coins"></use>
</svg>
<div class="name">coins</div>
<div class="fontclass">#icon-coins</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-comment"></use>
</svg>
<div class="name">comment</div>
<div class="fontclass">#icon-comment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-comments"></use>
</svg>
<div class="name">comments</div>
<div class="fontclass">#icon-comments</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-compass"></use>
</svg>
<div class="name">compass</div>
<div class="fontclass">#icon-compass</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-compass2"></use>
</svg>
<div class="name">compass-2</div>
<div class="fontclass">#icon-compass2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-contractdirections"></use>
</svg>
<div class="name">contract-directions</div>
<div class="fontclass">#icon-contractdirections</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-contracthorizontal"></use>
</svg>
<div class="name">contract-horizontal</div>
<div class="fontclass">#icon-contracthorizontal</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-contractvertical"></use>
</svg>
<div class="name">contract-vertical</div>
<div class="fontclass">#icon-contractvertical</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-copydocument"></use>
</svg>
<div class="name">copy-document</div>
<div class="fontclass">#icon-copydocument</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-copypastedocument"></use>
</svg>
<div class="name">copy-paste-document</div>
<div class="fontclass">#icon-copypastedocument</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-creditcard"></use>
</svg>
<div class="name">credit-card</div>
<div class="fontclass">#icon-creditcard</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cross"></use>
</svg>
<div class="name">cross</div>
<div class="fontclass">#icon-cross</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-directions"></use>
</svg>
<div class="name">directions</div>
<div class="fontclass">#icon-directions</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-document"></use>
</svg>
<div class="name">document</div>
<div class="fontclass">#icon-document</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-documentfill"></use>
</svg>
<div class="name">document-fill</div>
<div class="fontclass">#icon-documentfill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-documents"></use>
</svg>
<div class="name">documents</div>
<div class="fontclass">#icon-documents</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dollar"></use>
</svg>
<div class="name">dollar</div>
<div class="fontclass">#icon-dollar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dotcircle"></use>
</svg>
<div class="name">dot-circle</div>
<div class="fontclass">#icon-dotcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dotline"></use>
</svg>
<div class="name">dot-line</div>
<div class="fontclass">#icon-dotline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dotsquare"></use>
</svg>
<div class="name">dot-square</div>
<div class="fontclass">#icon-dotsquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-doublediamonds"></use>
</svg>
<div class="name">double-diamonds</div>
<div class="fontclass">#icon-doublediamonds</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-downloadselection"></use>
</svg>
<div class="name">download-selection</div>
<div class="fontclass">#icon-downloadselection</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-downloadselectioncircle"></use>
</svg>
<div class="name">download-selection-circle</div>
<div class="fontclass">#icon-downloadselectioncircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-drop"></use>
</svg>
<div class="name">drop</div>
<div class="fontclass">#icon-drop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-drops"></use>
</svg>
<div class="name">drops</div>
<div class="fontclass">#icon-drops</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-eject"></use>
</svg>
<div class="name">eject</div>
<div class="fontclass">#icon-eject</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emailadd"></use>
</svg>
<div class="name">email-add</div>
<div class="fontclass">#icon-emailadd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emailclose"></use>
</svg>
<div class="name">email-close</div>
<div class="fontclass">#icon-emailclose</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emaildownload"></use>
</svg>
<div class="name">email-download</div>
<div class="fontclass">#icon-emaildownload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emailluminosity"></use>
</svg>
<div class="name">email-luminosity</div>
<div class="fontclass">#icon-emailluminosity</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emailremove"></use>
</svg>
<div class="name">email-remove</div>
<div class="fontclass">#icon-emailremove</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emailspam"></use>
</svg>
<div class="name">email-spam</div>
<div class="fontclass">#icon-emailspam</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-emailupload"></use>
</svg>
<div class="name">email-upload</div>
<div class="fontclass">#icon-emailupload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-euro"></use>
</svg>
<div class="name">euro</div>
<div class="fontclass">#icon-euro</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-expand"></use>
</svg>
<div class="name">expand</div>
<div class="fontclass">#icon-expand</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-expanddirections"></use>
</svg>
<div class="name">expand-directions</div>
<div class="fontclass">#icon-expanddirections</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-expandhorizontal"></use>
</svg>
<div class="name">expand-horizontal</div>
<div class="fontclass">#icon-expandhorizontal</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-expandvertical"></use>
</svg>
<div class="name">expand-vertical</div>
<div class="fontclass">#icon-expandvertical</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-eyedisabled"></use>
</svg>
<div class="name">eye-disabled</div>
<div class="fontclass">#icon-eyedisabled</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-femalesymbol"></use>
</svg>
<div class="name">female-symbol</div>
<div class="fontclass">#icon-femalesymbol</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fire"></use>
</svg>
<div class="name">fire</div>
<div class="fontclass">#icon-fire</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-graphs"></use>
</svg>
<div class="name">graphs</div>
<div class="fontclass">#icon-graphs</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gridbig"></use>
</svg>
<div class="name">grid-big</div>
<div class="fontclass">#icon-gridbig</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-grids"></use>
</svg>
<div class="name">grids</div>
<div class="fontclass">#icon-grids</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-hddnet"></use>
</svg>
<div class="name">hdd-net</div>
<div class="fontclass">#icon-hddnet</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hddraid"></use>
</svg>
<div class="name">hdd-raid</div>
<div class="fontclass">#icon-hddraid</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-homewifi"></use>
</svg>
<div class="name">home-wifi</div>
<div class="fontclass">#icon-homewifi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-idea"></use>
</svg>
<div class="name">idea</div>
<div class="fontclass">#icon-idea</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-italic"></use>
</svg>
<div class="name">italic</div>
<div class="fontclass">#icon-italic</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-landscape"></use>
</svg>
<div class="name">landscape</div>
<div class="fontclass">#icon-landscape</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-layers"></use>
</svg>
<div class="name">layers</div>
<div class="fontclass">#icon-layers</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leaf"></use>
</svg>
<div class="name">leaf</div>
<div class="fontclass">#icon-leaf</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leftright"></use>
</svg>
<div class="name">left-right</div>
<div class="fontclass">#icon-leftright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likeadd"></use>
</svg>
<div class="name">like-add</div>
<div class="fontclass">#icon-likeadd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likeban"></use>
</svg>
<div class="name">like-ban</div>
<div class="fontclass">#icon-likeban</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likeclose"></use>
</svg>
<div class="name">like-close</div>
<div class="fontclass">#icon-likeclose</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likedownload"></use>
</svg>
<div class="name">like-download</div>
<div class="fontclass">#icon-likedownload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likeremove"></use>
</svg>
<div class="name">like-remove</div>
<div class="fontclass">#icon-likeremove</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likeupload"></use>
</svg>
<div class="name">like-upload</div>
<div class="fontclass">#icon-likeupload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-limitdirections"></use>
</svg>
<div class="name">limit-directions</div>
<div class="fontclass">#icon-limitdirections</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-linethrough"></use>
</svg>
<div class="name">line-through</div>
<div class="fontclass">#icon-linethrough</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-linkurl"></use>
</svg>
<div class="name">link-url</div>
<div class="fontclass">#icon-linkurl</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-listcircle"></use>
</svg>
<div class="name">list-circle</div>
<div class="fontclass">#icon-listcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-listsquare"></use>
</svg>
<div class="name">list-square</div>
<div class="fontclass">#icon-listsquare</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-location"></use>
</svg>
<div class="name">location</div>
<div class="fontclass">#icon-location</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-locationmaps"></use>
</svg>
<div class="name">location-maps</div>
<div class="fontclass">#icon-locationmaps</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-locked"></use>
</svg>
<div class="name">locked</div>
<div class="fontclass">#icon-locked</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-loginlockrefresh"></use>
</svg>
<div class="name">login-lock-refresh</div>
<div class="fontclass">#icon-loginlockrefresh</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-magicwand"></use>
</svg>
<div class="name">magic-wand</div>
<div class="fontclass">#icon-magicwand</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-magnet"></use>
</svg>
<div class="name">magnet</div>
<div class="fontclass">#icon-magnet</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-mailbox"></use>
</svg>
<div class="name">mailbox</div>
<div class="fontclass">#icon-mailbox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-malesymbol"></use>
</svg>
<div class="name">male-symbol</div>
<div class="fontclass">#icon-malesymbol</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-map"></use>
</svg>
<div class="name">map</div>
<div class="fontclass">#icon-map</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-marker"></use>
</svg>
<div class="name">marker</div>
<div class="fontclass">#icon-marker</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-markeradd"></use>
</svg>
<div class="name">marker-add</div>
<div class="fontclass">#icon-markeradd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-markerminus"></use>
</svg>
<div class="name">marker-minus</div>
<div class="fontclass">#icon-markerminus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-markerpoints"></use>
</svg>
<div class="name">marker-points</div>
<div class="fontclass">#icon-markerpoints</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-multiborders"></use>
</svg>
<div class="name">multi-borders</div>
<div class="fontclass">#icon-multiborders</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-music"></use>
</svg>
<div class="name">music</div>
<div class="fontclass">#icon-music</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-nextfaststep"></use>
</svg>
<div class="name">next-fast-step</div>
<div class="fontclass">#icon-nextfaststep</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-nextstep"></use>
</svg>
<div class="name">next-step</div>
<div class="fontclass">#icon-nextstep</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numbereight"></use>
</svg>
<div class="name">number-eight</div>
<div class="fontclass">#icon-numbereight</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numberfive"></use>
</svg>
<div class="name">number-five</div>
<div class="fontclass">#icon-numberfive</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numberfour"></use>
</svg>
<div class="name">number-four</div>
<div class="fontclass">#icon-numberfour</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numbernine"></use>
</svg>
<div class="name">number-nine</div>
<div class="fontclass">#icon-numbernine</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numberone"></use>
</svg>
<div class="name">number-one</div>
<div class="fontclass">#icon-numberone</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numberseven"></use>
</svg>
<div class="name">number-seven</div>
<div class="fontclass">#icon-numberseven</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numbersix"></use>
</svg>
<div class="name">number-six</div>
<div class="fontclass">#icon-numbersix</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numberthree"></use>
</svg>
<div class="name">number-three</div>
<div class="fontclass">#icon-numberthree</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numbertwo"></use>
</svg>
<div class="name">number-two</div>
<div class="fontclass">#icon-numbertwo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-numberzero"></use>
</svg>
<div class="name">number-zero</div>
<div class="fontclass">#icon-numberzero</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-off"></use>
</svg>
<div class="name">off</div>
<div class="fontclass">#icon-off</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-officine"></use>
</svg>
<div class="name">officine</div>
<div class="fontclass">#icon-officine</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-officine2"></use>
</svg>
<div class="name">officine-2</div>
<div class="fontclass">#icon-officine2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-optionssettings"></use>
</svg>
<div class="name">options-settings</div>
<div class="fontclass">#icon-optionssettings</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-paperclipoblique"></use>
</svg>
<div class="name">paperclip-oblique</div>
<div class="fontclass">#icon-paperclipoblique</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-pigmoney"></use>
</svg>
<div class="name">pig-money</div>
<div class="fontclass">#icon-pigmoney</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pin"></use>
</svg>
<div class="name">pin</div>
<div class="fontclass">#icon-pin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pinmap"></use>
</svg>
<div class="name">pin-map</div>
<div class="fontclass">#icon-pinmap</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-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-podcast"></use>
</svg>
<div class="name">podcast</div>
<div class="fontclass">#icon-podcast</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pounds"></use>
</svg>
<div class="name">pounds</div>
<div class="fontclass">#icon-pounds</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-previousfaststep"></use>
</svg>
<div class="name">previous-fast-step</div>
<div class="fontclass">#icon-previousfaststep</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-prevstep"></use>
</svg>
<div class="name">prev-step</div>
<div class="fontclass">#icon-prevstep</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-quote"></use>
</svg>
<div class="name">quote</div>
<div class="fontclass">#icon-quote</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-random"></use>
</svg>
<div class="name">random</div>
<div class="fontclass">#icon-random</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rec"></use>
</svg>
<div class="name">rec</div>
<div class="fontclass">#icon-rec</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-refresh"></use>
</svg>
<div class="name">refresh</div>
<div class="fontclass">#icon-refresh</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-reportcomment"></use>
</svg>
<div class="name">report-comment</div>
<div class="fontclass">#icon-reportcomment</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-rss"></use>
</svg>
<div class="name">rss</div>
<div class="fontclass">#icon-rss</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rules"></use>
</svg>
<div class="name">rules</div>
<div class="fontclass">#icon-rules</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-scale"></use>
</svg>
<div class="name">scale</div>
<div class="fontclass">#icon-scale</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-search"></use>
</svg>
<div class="name">search</div>
<div class="fontclass">#icon-search</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-selectcircle"></use>
</svg>
<div class="name">select-circle</div>
<div class="fontclass">#icon-selectcircle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-selectsquare"></use>
</svg>
<div class="name">select-square</div>
<div class="fontclass">#icon-selectsquare</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-settings"></use>
</svg>
<div class="name">settings</div>
<div class="fontclass">#icon-settings</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shield"></use>
</svg>
<div class="name">shield</div>
<div class="fontclass">#icon-shield</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-signfemale"></use>
</svg>
<div class="name">sign-female</div>
<div class="fontclass">#icon-signfemale</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-signmale"></use>
</svg>
<div class="name">sign-male</div>
<div class="fontclass">#icon-signmale</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sliders"></use>
</svg>
<div class="name">sliders</div>
<div class="fontclass">#icon-sliders</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-slidersvertical"></use>
</svg>
<div class="name">sliders-vertical</div>
<div class="fontclass">#icon-slidersvertical</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-snow"></use>
</svg>
<div class="name">snow</div>
<div class="fontclass">#icon-snow</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social500px"></use>
</svg>
<div class="name">social-500px</div>
<div class="fontclass">#icon-social500px</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialaddthis"></use>
</svg>
<div class="name">social-addthis</div>
<div class="fontclass">#icon-socialaddthis</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialbebo"></use>
</svg>
<div class="name">social-bebo</div>
<div class="fontclass">#icon-socialbebo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialbehance"></use>
</svg>
<div class="name">social-behance</div>
<div class="fontclass">#icon-socialbehance</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialblogger"></use>
</svg>
<div class="name">social-blogger</div>
<div class="fontclass">#icon-socialblogger</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialdeviantart"></use>
</svg>
<div class="name">social-deviantart</div>
<div class="fontclass">#icon-socialdeviantart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialdigg"></use>
</svg>
<div class="name">social-digg</div>
<div class="fontclass">#icon-socialdigg</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialdribbble"></use>
</svg>
<div class="name">social-dribbble</div>
<div class="fontclass">#icon-socialdribbble</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialemail"></use>
</svg>
<div class="name">social-email</div>
<div class="fontclass">#icon-socialemail</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialenvato"></use>
</svg>
<div class="name">social-envato</div>
<div class="fontclass">#icon-socialenvato</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialevernote"></use>
</svg>
<div class="name">social-evernote</div>
<div class="fontclass">#icon-socialevernote</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialfacebook"></use>
</svg>
<div class="name">social-facebook</div>
<div class="fontclass">#icon-socialfacebook</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialflickr"></use>
</svg>
<div class="name">social-flickr</div>
<div class="fontclass">#icon-socialflickr</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialforrst"></use>
</svg>
<div class="name">social-forrst</div>
<div class="fontclass">#icon-socialforrst</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialgithub"></use>
</svg>
<div class="name">social-github</div>
<div class="fontclass">#icon-socialgithub</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialgoogleplus"></use>
</svg>
<div class="name">social-google-plus</div>
<div class="fontclass">#icon-socialgoogleplus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialgrooveshark"></use>
</svg>
<div class="name">social-grooveshark</div>
<div class="fontclass">#icon-socialgrooveshark</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sociallastfm"></use>
</svg>
<div class="name">social-last-fm</div>
<div class="fontclass">#icon-sociallastfm</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sociallinkedin"></use>
</svg>
<div class="name">social-linkedin</div>
<div class="fontclass">#icon-sociallinkedin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialmyspace"></use>
</svg>
<div class="name">social-myspace</div>
<div class="fontclass">#icon-socialmyspace</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialpaypal"></use>
</svg>
<div class="name">social-paypal</div>
<div class="fontclass">#icon-socialpaypal</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialphotobucket"></use>
</svg>
<div class="name">social-photobucket</div>
<div class="fontclass">#icon-socialphotobucket</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialpinterest"></use>
</svg>
<div class="name">social-pinterest</div>
<div class="fontclass">#icon-socialpinterest</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialquora"></use>
</svg>
<div class="name">social-quora</div>
<div class="fontclass">#icon-socialquora</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialsharethis"></use>
</svg>
<div class="name">social-sharethis</div>
<div class="fontclass">#icon-socialsharethis</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialskype"></use>
</svg>
<div class="name">social-skype</div>
<div class="fontclass">#icon-socialskype</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialsoundcloud"></use>
</svg>
<div class="name">social-soundcloud</div>
<div class="fontclass">#icon-socialsoundcloud</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialstumbleupon"></use>
</svg>
<div class="name">social-stumbleupon</div>
<div class="fontclass">#icon-socialstumbleupon</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialtumblr"></use>
</svg>
<div class="name">social-tumblr</div>
<div class="fontclass">#icon-socialtumblr</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialtwitter"></use>
</svg>
<div class="name">social-twitter</div>
<div class="fontclass">#icon-socialtwitter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialviddler"></use>
</svg>
<div class="name">social-viddler</div>
<div class="fontclass">#icon-socialviddler</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialvimeo"></use>
</svg>
<div class="name">social-vimeo</div>
<div class="fontclass">#icon-socialvimeo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialvirb"></use>
</svg>
<div class="name">social-virb</div>
<div class="fontclass">#icon-socialvirb</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialwordpress"></use>
</svg>
<div class="name">social-wordpress</div>
<div class="fontclass">#icon-socialwordpress</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialyahoo"></use>
</svg>
<div class="name">social-yahoo</div>
<div class="fontclass">#icon-socialyahoo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialyelp"></use>
</svg>
<div class="name">social-yelp</div>
<div class="fontclass">#icon-socialyelp</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialyoutube"></use>
</svg>
<div class="name">social-youtube</div>
<div class="fontclass">#icon-socialyoutube</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-socialzerply"></use>
</svg>
<div class="name">social-zerply</div>
<div class="fontclass">#icon-socialzerply</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sos"></use>
</svg>
<div class="name">sos</div>
<div class="fontclass">#icon-sos</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-soundoff"></use>
</svg>
<div class="name">sound-off</div>
<div class="fontclass">#icon-soundoff</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-soundon"></use>
</svg>
<div class="name">sound-on</div>
<div class="fontclass">#icon-soundon</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-speed"></use>
</svg>
<div class="name">speed</div>
<div class="fontclass">#icon-speed</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-stop"></use>
</svg>
<div class="name">stop</div>
<div class="fontclass">#icon-stop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sun"></use>
</svg>
<div class="name">sun</div>
<div class="fontclass">#icon-sun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sunshine"></use>
</svg>
<div class="name">sunshine</div>
<div class="fontclass">#icon-sunshine</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-telephone"></use>
</svg>
<div class="name">telephone</div>
<div class="fontclass">#icon-telephone</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textalignleft"></use>
</svg>
<div class="name">text-align-left</div>
<div class="fontclass">#icon-textalignleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textalignright"></use>
</svg>
<div class="name">text-align-right</div>
<div class="fontclass">#icon-textalignright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textbold"></use>
</svg>
<div class="name">text-bold</div>
<div class="fontclass">#icon-textbold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textcenter"></use>
</svg>
<div class="name">text-center</div>
<div class="fontclass">#icon-textcenter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textheight"></use>
</svg>
<div class="name">text-height</div>
<div class="fontclass">#icon-textheight</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textjustifycenter"></use>
</svg>
<div class="name">text-justify-center</div>
<div class="fontclass">#icon-textjustifycenter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textjustifyleft"></use>
</svg>
<div class="name">text-justify-left</div>
<div class="fontclass">#icon-textjustifyleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textjustifyright"></use>
</svg>
<div class="name">text-justify-right</div>
<div class="fontclass">#icon-textjustifyright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textnormal"></use>
</svg>
<div class="name">text-normal</div>
<div class="fontclass">#icon-textnormal</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textparagraph"></use>
</svg>
<div class="name">text-paragraph</div>
<div class="fontclass">#icon-textparagraph</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textsizereduce"></use>
</svg>
<div class="name">text-size-reduce</div>
<div class="fontclass">#icon-textsizereduce</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textsizeupper"></use>
</svg>
<div class="name">text-size-upper</div>
<div class="fontclass">#icon-textsizeupper</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-textwidth"></use>
</svg>
<div class="name">text-width</div>
<div class="fontclass">#icon-textwidth</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-threepoints"></use>
</svg>
<div class="name">three-points</div>
<div class="fontclass">#icon-threepoints</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-threepointsbottom"></use>
</svg>
<div class="name">three-points-bottom</div>
<div class="fontclass">#icon-threepointsbottom</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-threepointstop"></use>
</svg>
<div class="name">three-points-top</div>
<div class="fontclass">#icon-threepointstop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-topbottom"></use>
</svg>
<div class="name">top-bottom</div>
<div class="fontclass">#icon-topbottom</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-triplepoints"></use>
</svg>
<div class="name">triple-points</div>
<div class="fontclass">#icon-triplepoints</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-underline"></use>
</svg>
<div class="name">underline</div>
<div class="fontclass">#icon-underline</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-uploadselection"></use>
</svg>
<div class="name">upload-selection</div>
<div class="fontclass">#icon-uploadselection</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-uploadselectioncircle"></use>
</svg>
<div class="name">upload-selection-circle</div>
<div class="fontclass">#icon-uploadselectioncircle</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-useradd"></use>
</svg>
<div class="name">user-add</div>
<div class="fontclass">#icon-useradd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-userban"></use>
</svg>
<div class="name">user-ban</div>
<div class="fontclass">#icon-userban</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-userremove"></use>
</svg>
<div class="name">user-remove</div>
<div class="fontclass">#icon-userremove</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-viewport"></use>
</svg>
<div class="name">viewport</div>
<div class="fontclass">#icon-viewport</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-viewportvideo"></use>
</svg>
<div class="name">viewport-video</div>
<div class="fontclass">#icon-viewportvideo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-waves"></use>
</svg>
<div class="name">waves</div>
<div class="fontclass">#icon-waves</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-wind"></use>
</svg>
<div class="name">wind</div>
<div class="fontclass">#icon-wind</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wireframeglobe"></use>
</svg>
<div class="name">wireframe-globe</div>
<div class="fontclass">#icon-wireframeglobe</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yen"></use>
</svg>
<div class="name">yen</div>
<div class="fontclass">#icon-yen</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>