vue-moo
Version:
moo
1,224 lines (1,071 loc) • 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