h_ui
Version:
A Vue.js 2.0 UI Components Framework
1,187 lines (1,039 loc) • 253 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-person-stalker"></use>
</svg>
<div class="name">person-stalker</div>
<div class="fontclass">#icon-person-stalker</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-card"></use>
</svg>
<div class="name">card</div>
<div class="fontclass">#icon-card</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code"></use>
</svg>
<div class="name">code</div>
<div class="fontclass">#icon-code</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-eye-disabled"></use>
</svg>
<div class="name">eye-disabled</div>
<div class="fontclass">#icon-eye-disabled</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chatbubble-working"></use>
</svg>
<div class="name">chatbubble-working</div>
<div class="fontclass">#icon-chatbubble-working</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-image"></use>
</svg>
<div class="name">image</div>
<div class="fontclass">#icon-image</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-contacts"></use>
</svg>
<div class="name">android-contacts</div>
<div class="fontclass">#icon-android-contacts</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-sunny"></use>
</svg>
<div class="name">android-sunny</div>
<div class="fontclass">#icon-android-sunny</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-textsms"></use>
</svg>
<div class="name">android-textsms</div>
<div class="fontclass">#icon-android-textsms</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-alert"></use>
</svg>
<div class="name">android-alert</div>
<div class="fontclass">#icon-android-alert</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-bar"></use>
</svg>
<div class="name">android-bar</div>
<div class="fontclass">#icon-android-bar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-bulb"></use>
</svg>
<div class="name">android-bulb</div>
<div class="fontclass">#icon-android-bulb</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-camera"></use>
</svg>
<div class="name">android-camera</div>
<div class="fontclass">#icon-android-camera</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-cart"></use>
</svg>
<div class="name">android-cart</div>
<div class="fontclass">#icon-android-cart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-cloud-outline"></use>
</svg>
<div class="name">android-cloud-outline</div>
<div class="fontclass">#icon-android-cloud-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-document"></use>
</svg>
<div class="name">android-document</div>
<div class="fontclass">#icon-android-document</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-done"></use>
</svg>
<div class="name">android-done</div>
<div class="fontclass">#icon-android-done</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-done-all"></use>
</svg>
<div class="name">android-done-all</div>
<div class="fontclass">#icon-android-done-all</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-happy"></use>
</svg>
<div class="name">android-happy</div>
<div class="fontclass">#icon-android-happy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-image"></use>
</svg>
<div class="name">android-image</div>
<div class="fontclass">#icon-android-image</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-notifications-none"></use>
</svg>
<div class="name">android-notifications-none</div>
<div class="fontclass">#icon-android-notifications-none</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-list"></use>
</svg>
<div class="name">android-list</div>
<div class="fontclass">#icon-android-list</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-plane"></use>
</svg>
<div class="name">android-plane</div>
<div class="fontclass">#icon-android-plane</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-playstore"></use>
</svg>
<div class="name">android-playstore</div>
<div class="fontclass">#icon-android-playstore</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-print"></use>
</svg>
<div class="name">android-print</div>
<div class="fontclass">#icon-android-print</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-sad"></use>
</svg>
<div class="name">android-sad</div>
<div class="fontclass">#icon-android-sad</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-star"></use>
</svg>
<div class="name">android-star</div>
<div class="fontclass">#icon-android-star</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-warning"></use>
</svg>
<div class="name">android-warning</div>
<div class="fontclass">#icon-android-warning</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chatbubble"></use>
</svg>
<div class="name">chatbubble</div>
<div class="fontclass">#icon-chatbubble</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-headphone"></use>
</svg>
<div class="name">headphone</div>
<div class="fontclass">#icon-headphone</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pinpoint"></use>
</svg>
<div class="name">pinpoint</div>
<div class="fontclass">#icon-pinpoint</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-qr-scanner"></use>
</svg>
<div class="name">qr-scanner</div>
<div class="fontclass">#icon-qr-scanner</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-skip-backward"></use>
</svg>
<div class="name">skip-backward</div>
<div class="fontclass">#icon-skip-backward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-speedometer"></use>
</svg>
<div class="name">speedometer</div>
<div class="fontclass">#icon-speedometer</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tshirt-outline"></use>
</svg>
<div class="name">tshirt-outline</div>
<div class="fontclass">#icon-tshirt-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wineglass"></use>
</svg>
<div class="name">wineglass</div>
<div class="fontclass">#icon-wineglass</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-android"></use>
</svg>
<div class="name">social-android</div>
<div class="fontclass">#icon-social-android</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-android-outline"></use>
</svg>
<div class="name">social-android-outline</div>
<div class="fontclass">#icon-social-android-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-angular"></use>
</svg>
<div class="name">social-angular</div>
<div class="fontclass">#icon-social-angular</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-angular-outline"></use>
</svg>
<div class="name">social-angular-outline</div>
<div class="fontclass">#icon-social-angular-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-apple"></use>
</svg>
<div class="name">social-apple</div>
<div class="fontclass">#icon-social-apple</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-apple-outline"></use>
</svg>
<div class="name">social-apple-outline</div>
<div class="fontclass">#icon-social-apple-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-buffer"></use>
</svg>
<div class="name">social-buffer</div>
<div class="fontclass">#icon-social-buffer</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-buffer-outline"></use>
</svg>
<div class="name">social-buffer-outline</div>
<div class="fontclass">#icon-social-buffer-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-chrome"></use>
</svg>
<div class="name">social-chrome</div>
<div class="fontclass">#icon-social-chrome</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-chrome-outline"></use>
</svg>
<div class="name">social-chrome-outline</div>
<div class="fontclass">#icon-social-chrome-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-css3"></use>
</svg>
<div class="name">social-css3</div>
<div class="fontclass">#icon-social-css3</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-css3-outline"></use>
</svg>
<div class="name">social-css3-outline</div>
<div class="fontclass">#icon-social-css3-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-dribbble"></use>
</svg>
<div class="name">social-dribbble</div>
<div class="fontclass">#icon-social-dribbble</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-dribbble-outline"></use>
</svg>
<div class="name">social-dribbble-outline</div>
<div class="fontclass">#icon-social-dribbble-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-dropbox"></use>
</svg>
<div class="name">social-dropbox</div>
<div class="fontclass">#icon-social-dropbox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-dropbox-outline"></use>
</svg>
<div class="name">social-dropbox-outline</div>
<div class="fontclass">#icon-social-dropbox-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-facebook"></use>
</svg>
<div class="name">social-facebook</div>
<div class="fontclass">#icon-social-facebook</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-facebook-outline"></use>
</svg>
<div class="name">social-facebook-outline</div>
<div class="fontclass">#icon-social-facebook-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-google-outline"></use>
</svg>
<div class="name">social-google-outline</div>
<div class="fontclass">#icon-social-google-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-html5"></use>
</svg>
<div class="name">social-html5</div>
<div class="fontclass">#icon-social-html5</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-html5-outline"></use>
</svg>
<div class="name">social-html5-outline</div>
<div class="fontclass">#icon-social-html5-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-instagram"></use>
</svg>
<div class="name">social-instagram</div>
<div class="fontclass">#icon-social-instagram</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-instagram-outline"></use>
</svg>
<div class="name">social-instagram-outline</div>
<div class="fontclass">#icon-social-instagram-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-javascript"></use>
</svg>
<div class="name">social-javascript</div>
<div class="fontclass">#icon-social-javascript</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-javascript-outline"></use>
</svg>
<div class="name">social-javascript-outline</div>
<div class="fontclass">#icon-social-javascript-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-linkedin"></use>
</svg>
<div class="name">social-linkedin</div>
<div class="fontclass">#icon-social-linkedin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-linkedin-outline"></use>
</svg>
<div class="name">social-linkedin-outline</div>
<div class="fontclass">#icon-social-linkedin-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-markdown"></use>
</svg>
<div class="name">social-markdown</div>
<div class="fontclass">#icon-social-markdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-nodejs"></use>
</svg>
<div class="name">social-nodejs</div>
<div class="fontclass">#icon-social-nodejs</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-pinterest"></use>
</svg>
<div class="name">social-pinterest</div>
<div class="fontclass">#icon-social-pinterest</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-rss"></use>
</svg>
<div class="name">social-rss</div>
<div class="fontclass">#icon-social-rss</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-rss-outline"></use>
</svg>
<div class="name">social-rss-outline</div>
<div class="fontclass">#icon-social-rss-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-skype"></use>
</svg>
<div class="name">social-skype</div>
<div class="fontclass">#icon-social-skype</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-skype-outline"></use>
</svg>
<div class="name">social-skype-outline</div>
<div class="fontclass">#icon-social-skype-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-twitter"></use>
</svg>
<div class="name">social-twitter</div>
<div class="fontclass">#icon-social-twitter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-twitter-outline"></use>
</svg>
<div class="name">social-twitter-outline</div>
<div class="fontclass">#icon-social-twitter-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-usd"></use>
</svg>
<div class="name">social-usd</div>
<div class="fontclass">#icon-social-usd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-usd-outline"></use>
</svg>
<div class="name">social-usd-outline</div>
<div class="fontclass">#icon-social-usd-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-vimeo"></use>
</svg>
<div class="name">social-vimeo</div>
<div class="fontclass">#icon-social-vimeo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-vimeo-outline"></use>
</svg>
<div class="name">social-vimeo-outline</div>
<div class="fontclass">#icon-social-vimeo-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-whatsapp"></use>
</svg>
<div class="name">social-whatsapp</div>
<div class="fontclass">#icon-social-whatsapp</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-whatsapp-outline"></use>
</svg>
<div class="name">social-whatsapp-outline</div>
<div class="fontclass">#icon-social-whatsapp-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-windows"></use>
</svg>
<div class="name">social-windows</div>
<div class="fontclass">#icon-social-windows</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-windows-outline"></use>
</svg>
<div class="name">social-windows-outline</div>
<div class="fontclass">#icon-social-windows-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-wordpress"></use>
</svg>
<div class="name">social-wordpress</div>
<div class="fontclass">#icon-social-wordpress</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-wordpress-outline"></use>
</svg>
<div class="name">social-wordpress-outline</div>
<div class="fontclass">#icon-social-wordpress-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-yen"></use>
</svg>
<div class="name">social-yen</div>
<div class="fontclass">#icon-social-yen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-yen-outline"></use>
</svg>
<div class="name">social-yen-outline</div>
<div class="fontclass">#icon-social-yen-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-youtube"></use>
</svg>
<div class="name">social-youtube</div>
<div class="fontclass">#icon-social-youtube</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-youtube-outline"></use>
</svg>
<div class="name">social-youtube-outline</div>
<div class="fontclass">#icon-social-youtube-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-download"></use>
</svg>
<div class="name">android-download</div>
<div class="fontclass">#icon-android-download</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-coffee"></use>
</svg>
<div class="name">coffee</div>
<div class="fontclass">#icon-coffee</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ios-bell"></use>
</svg>
<div class="name">ios-bell</div>
<div class="fontclass">#icon-ios-bell</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ios-home"></use>
</svg>
<div class="name">ios-home</div>
<div class="fontclass">#icon-ios-home</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ios-lightbulb"></use>
</svg>
<div class="name">ios-lightbulb</div>
<div class="fontclass">#icon-ios-lightbulb</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ribbon-b"></use>
</svg>
<div class="name">ribbon-b</div>
<div class="fontclass">#icon-ribbon-b</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-close"></use>
</svg>
<div class="name">android-close</div>
<div class="fontclass">#icon-android-close</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-arrow-back"></use>
</svg>
<div class="name">android-arrow-back</div>
<div class="fontclass">#icon-android-arrow-back</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-exit"></use>
</svg>
<div class="name">android-exit</div>
<div class="fontclass">#icon-android-exit</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-battery-charging"></use>
</svg>
<div class="name">battery-charging</div>
<div class="fontclass">#icon-battery-charging</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-lock"></use>
</svg>
<div class="name">android-lock</div>
<div class="fontclass">#icon-android-lock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-chat"></use>
</svg>
<div class="name">android-chat</div>
<div class="fontclass">#icon-android-chat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-checkbox-outline-blank"></use>
</svg>
<div class="name">android-checkbox-outline-blank</div>
<div class="fontclass">#icon-android-checkbox-outline-blank</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-navigate"></use>
</svg>
<div class="name">android-navigate</div>
<div class="fontclass">#icon-android-navigate</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-restaurant"></use>
</svg>
<div class="name">android-restaurant</div>
<div class="fontclass">#icon-android-restaurant</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-star-outline"></use>
</svg>
<div class="name">android-star-outline</div>
<div class="fontclass">#icon-android-star-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-sync"></use>
</svg>
<div class="name">android-sync</div>
<div class="fontclass">#icon-android-sync</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-volume-down"></use>
</svg>
<div class="name">android-volume-down</div>
<div class="fontclass">#icon-android-volume-down</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-laptop"></use>
</svg>
<div class="name">laptop</div>
<div class="fontclass">#icon-laptop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mic-c"></use>
</svg>
<div class="name">mic-c</div>
<div class="fontclass">#icon-mic-c</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-person-add"></use>
</svg>
<div class="name">person-add</div>
<div class="fontclass">#icon-person-add</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pricetags"></use>
</svg>
<div class="name">pricetags</div>
<div class="fontclass">#icon-pricetags</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-printer"></use>
</svg>
<div class="name">printer</div>
<div class="fontclass">#icon-printer</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-yahoo"></use>
</svg>
<div class="name">social-yahoo</div>
<div class="fontclass">#icon-social-yahoo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-thumbsdown"></use>
</svg>
<div class="name">thumbsdown</div>
<div class="fontclass">#icon-thumbsdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-desktop"></use>
</svg>
<div class="name">android-desktop</div>
<div class="fontclass">#icon-android-desktop</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-film"></use>
</svg>
<div class="name">android-film</div>
<div class="fontclass">#icon-android-film</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-globe"></use>
</svg>
<div class="name">android-globe</div>
<div class="fontclass">#icon-android-globe</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-mail"></use>
</svg>
<div class="name">android-mail</div>
<div class="fontclass">#icon-android-mail</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-open"></use>
</svg>
<div class="name">android-open</div>
<div class="fontclass">#icon-android-open</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-options"></use>
</svg>
<div class="name">android-options</div>
<div class="fontclass">#icon-android-options</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-person-add"></use>
</svg>
<div class="name">android-person-add</div>
<div class="fontclass">#icon-android-person-add</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-phone-landscape"></use>
</svg>
<div class="name">android-phone-landscape</div>
<div class="fontclass">#icon-android-phone-landscape</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-flash"></use>
</svg>
<div class="name">flash</div>
<div class="fontclass">#icon-flash</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-merge"></use>
</svg>
<div class="name">merge</div>
<div class="fontclass">#icon-merge</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mouse"></use>
</svg>
<div class="name">mouse</div>
<div class="fontclass">#icon-mouse</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-codepen"></use>
</svg>
<div class="name">social-codepen</div>
<div class="fontclass">#icon-social-codepen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-social-googleplus"></use>
</svg>
<div class="name">social-googleplus</div>
<div class="fontclass">#icon-social-googleplus</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unlocked"></use>
</svg>
<div class="name">unlocked</div>
<div class="fontclass">#icon-unlocked</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-videocamera"></use>
</svg>
<div class="name">videocamera</div>
<div class="fontclass">#icon-videocamera</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-man"></use>
</svg>
<div class="name">man</div>
<div class="fontclass">#icon-man</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bug"></use>
</svg>
<div class="name">bug</div>
<div class="fontclass">#icon-bug</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-arrow-down"></use>
</svg>
<div class="name">android-arrow-down</div>
<div class="fontclass">#icon-android-arrow-down</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-iphone"></use>
</svg>
<div class="name">iphone</div>
<div class="fontclass">#icon-iphone</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-checkbox"></use>
</svg>
<div class="name">android-checkbox</div>
<div class="fontclass">#icon-android-checkbox</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-create"></use>
</svg>
<div class="name">android-create</div>
<div class="fontclass">#icon-android-create</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-delete"></use>
</svg>
<div class="name">android-delete</div>
<div class="fontclass">#icon-android-delete</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-expand"></use>
</svg>
<div class="name">android-expand</div>
<div class="fontclass">#icon-android-expand</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-favorite-outline"></use>
</svg>
<div class="name">android-favorite-outline</div>
<div class="fontclass">#icon-android-favorite-outline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-locate"></use>
</svg>
<div class="name">android-locate</div>
<div class="fontclass">#icon-android-locate</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-more-vertical"></use>
</svg>
<div class="name">android-more-vertical</div>
<div class="fontclass">#icon-android-more-vertical</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-people"></use>
</svg>
<div class="name">android-people</div>
<div class="fontclass">#icon-android-people</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-send"></use>
</svg>
<div class="name">android-send</div>
<div class="fontclass">#icon-android-send</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-share"></use>
</svg>
<div class="name">android-share</div>
<div class="fontclass">#icon-android-share</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-android-watch"></use>
</svg>
<div class="name">android-watch</div>
<div class="fontclass">#icon-android-watch</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-at"></use>
</svg>
<div class="name">at</div>
<div class="fontclass">#icon-at</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-battery-empty"></use>
</svg>
<div class="name">battery-empty</div>
<div class="fontclass">#icon-battery-e