@ustack/uskin-icons
Version:
Uskin Icon fonts
1,360 lines (809 loc) • 30.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>icons</title>
<style>
body {
margin:0;
padding:10px 20px;
background:#fff;
color:#222;
}
h1, div, footer {
font-family:"Helvetica Neue", Arial, sans-serif;
}
h1 {
margin:0 0 20px;
font-size:32px;
font-weight:normal;
}
h1 small {
font-size: 0.8em;
padding-left: 2em;
}
.icons {
margin-bottom:40px;
-webkit-column-count:5;
-moz-column-count:5;
column-count:5;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.icons__item,
.icons__item i {
line-height:2em;
cursor:pointer;
overflow:hidden;
}
.icons__item:hover {
color:#3c90be;
}
.icons__item i {
display:inline-block;
width:32px;
text-align:center;
}
.icons__item:hover i {
-webkit-transform:scale(1.5);
transform:scale(1.5);
}
footer {
margin-top:40px;
font-size:14px;
color:#999;
}
/* Generated by grunt-webfont */
@font-face {
font-family:"icons";
src:url("../dist/fonts/icons.eot?c89ee081178c6709752986827c33a462");
src:url("../dist/fonts/icons.eot?c89ee081178c6709752986827c33a462#iefix") format("embedded-opentype"),
url("../dist/fonts/icons.woff?c89ee081178c6709752986827c33a462") format("woff"),
url("../dist/fonts/icons.ttf?c89ee081178c6709752986827c33a462") format("truetype"),
url("../dist/fonts/icons.svg?c89ee081178c6709752986827c33a462#icons") format("svg");
font-weight:normal;
font-style:normal;
}
.glyphicon {
font-family:"icons";
display:inline-block;
line-height:1;
font-weight:normal;
font-style:normal;
speak:none;
text-decoration:inherit;
text-transform:none;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Icons */
.icon-about:before {
content:"\f101";
}
.icon-account-charge:before {
content:"\f102";
}
.icon-active-yes:before {
content:"\f103";
}
.icon-active:before {
content:"\f104";
}
.icon-add-notice:before {
content:"\f105";
}
.icon-address-scope:before {
content:"\f106";
}
.icon-app-center:before {
content:"\f107";
}
.icon-applications:before {
content:"\f108";
}
.icon-arch:before {
content:"\f109";
}
.icon-arrow-down:before {
content:"\f10a";
}
.icon-arrow-left:before {
content:"\f10b";
}
.icon-arrow-right:before {
content:"\f10c";
}
.icon-arrow-up:before {
content:"\f10d";
}
.icon-associate:before {
content:"\f10e";
}
.icon-avatar:before {
content:"\f10f";
}
.icon-backup:before {
content:"\f110";
}
.icon-billing-record:before {
content:"\f111";
}
.icon-billing:before {
content:"\f112";
}
.icon-bucket:before {
content:"\f113";
}
.icon-bw-in:before {
content:"\f114";
}
.icon-bw-out:before {
content:"\f115";
}
.icon-cache-config:before {
content:"\f116";
}
.icon-cache:before {
content:"\f117";
}
.icon-calendar:before {
content:"\f118";
}
.icon-cc-video:before {
content:"\f119";
}
.icon-centos:before {
content:"\f11a";
}
.icon-charge-record:before {
content:"\f11b";
}
.icon-close:before {
content:"\f11c";
}
.icon-cloud-video:before {
content:"\f11d";
}
.icon-collaboration:before {
content:"\f11e";
}
.icon-copy:before {
content:"\f11f";
}
.icon-coreos:before {
content:"\f120";
}
.icon-correct:before {
content:"\f121";
}
.icon-cpu:before {
content:"\f122";
}
.icon-create:before {
content:"\f123";
}
.icon-database-config:before {
content:"\f124";
}
.icon-database:before {
content:"\f125";
}
.icon-debian:before {
content:"\f126";
}
.icon-delete:before {
content:"\f127";
}
.icon-deploy:before {
content:"\f128";
}
.icon-disable:before {
content:"\f129";
}
.icon-dissociate:before {
content:"\f12a";
}
.icon-doc:before {
content:"\f12b";
}
.icon-docx:before {
content:"\f12c";
}
.icon-domain:before {
content:"\f12d";
}
.icon-double-arrow-left:before {
content:"\f12e";
}
.icon-double-arrow-right:before {
content:"\f12f";
}
.icon-download:before {
content:"\f130";
}
.icon-dropdown:before {
content:"\f131";
}
.icon-edit:before {
content:"\f132";
}
.icon-empty:before {
content:"\f133";
}
.icon-enable:before {
content:"\f134";
}
.icon-epc-suse:before {
content:"\f135";
}
.icon-exe:before {
content:"\f136";
}
.icon-eye:before {
content:"\f137";
}
.icon-fedora:before {
content:"\f138";
}
.icon-file-sharing:before {
content:"\f139";
}
.icon-file:before {
content:"\f13a";
}
.icon-filter-collapse:before {
content:"\f13b";
}
.icon-filter-expand:before {
content:"\f13c";
}
.icon-flavor-setting:before {
content:"\f13d";
}
.icon-flavor:before {
content:"\f13e";
}
.icon-floating-ip:before {
content:"\f13f";
}
.icon-flv:before {
content:"\f140";
}
.icon-folder:before {
content:"\f141";
}
.icon-freebsd:before {
content:"\f142";
}
.icon-g-admin:before {
content:"\f143";
}
.icon-g-approval:before {
content:"\f144";
}
.icon-g-bill:before {
content:"\f145";
}
.icon-g-calamari:before {
content:"\f146";
}
.icon-g-dashboard:before {
content:"\f147";
}
.icon-g-ec2:before {
content:"\f148";
}
.icon-g-grafana:before {
content:"\f149";
}
.icon-g-rds:before {
content:"\f14a";
}
.icon-g-storage:before {
content:"\f14b";
}
.icon-g-subaccount:before {
content:"\f14c";
}
.icon-g-ticket:before {
content:"\f14d";
}
.icon-g-union:before {
content:"\f14e";
}
.icon-g-vmware:before {
content:"\f14f";
}
.icon-g-vpc:before {
content:"\f150";
}
.icon-gentoo:before {
content:"\f151";
}
.icon-global:before {
content:"\f152";
}
.icon-heat-list:before {
content:"\f153";
}
.icon-help:before {
content:"\f154";
}
.icon-host-aggregates:before {
content:"\f155";
}
.icon-host:before {
content:"\f156";
}
.icon-image:before {
content:"\f157";
}
.icon-ingress:before {
content:"\f158";
}
.icon-instance-snapshot:before {
content:"\f159";
}
.icon-instance:before {
content:"\f15a";
}
.icon-invoice:before {
content:"\f15b";
}
.icon-jpg:before {
content:"\f15c";
}
.icon-keypair:before {
content:"\f15d";
}
.icon-lb:before {
content:"\f15e";
}
.icon-listener:before {
content:"\f15f";
}
.icon-loading:before {
content:"\f160";
}
.icon-log:before {
content:"\f161";
}
.icon-logout:before {
content:"\f162";
}
.icon-m-swallow:before {
content:"\f163";
}
.icon-memory:before {
content:"\f164";
}
.icon-metadata-definition:before {
content:"\f165";
}
.icon-monitor:before {
content:"\f166";
}
.icon-more:before {
content:"\f167";
}
.icon-mp3:before {
content:"\f168";
}
.icon-mp4:before {
content:"\f169";
}
.icon-mvb:before {
content:"\f16a";
}
.icon-network-qos:before {
content:"\f16b";
}
.icon-network:before {
content:"\f16c";
}
.icon-notice-management:before {
content:"\f16d";
}
.icon-notification:before {
content:"\f16e";
}
.icon-object-storage:before {
content:"\f16f";
}
.icon-opensuse:before {
content:"\f170";
}
.icon-overview:before {
content:"\f171";
}
.icon-pdf:before {
content:"\f172";
}
.icon-performance:before {
content:"\f173";
}
.icon-png:before {
content:"\f174";
}
.icon-port:before {
content:"\f175";
}
.icon-power-off:before {
content:"\f176";
}
.icon-power-on:before {
content:"\f177";
}
.icon-ppt:before {
content:"\f178";
}
.icon-pptx:before {
content:"\f179";
}
.icon-project:before {
content:"\f17a";
}
.icon-property:before {
content:"\f17b";
}
.icon-question:before {
content:"\f17c";
}
.icon-quota-approval:before {
content:"\f17d";
}
.icon-rar:before {
content:"\f17e";
}
.icon-red-hat:before {
content:"\f17f";
}
.icon-redhat:before {
content:"\f180";
}
.icon-redirect-policy:before {
content:"\f181";
}
.icon-refresh:before {
content:"\f182";
}
.icon-region:before {
content:"\f183";
}
.icon-registration-approval:before {
content:"\f184";
}
.icon-remove:before {
content:"\f185";
}
.icon-resource-pool:before {
content:"\f186";
}
.icon-restart:before {
content:"\f187";
}
.icon-rmvb:before {
content:"\f188";
}
.icon-role:before {
content:"\f189";
}
.icon-router:before {
content:"\f18a";
}
.icon-s-lock:before {
content:"\f18b";
}
.icon-s-unlock:before {
content:"\f18c";
}
.icon-search:before {
content:"\f18d";
}
.icon-security-group:before {
content:"\f18e";
}
.icon-security-log:before {
content:"\f18f";
}
.icon-select-down:before {
content:"\f190";
}
.icon-setting:before {
content:"\f191";
}
.icon-sles:before {
content:"\f192";
}
.icon-snapshot:before {
content:"\f193";
}
.icon-status-active:before {
content:"\f194";
}
.icon-status-approving:before {
content:"\f195";
}
.icon-status-deleted:before {
content:"\f196";
}
.icon-status-disabled:before {
content:"\f197";
}
.icon-status-light:before {
content:"\f198";
}
.icon-status-paused:before {
content:"\f199";
}
.icon-status-pending:before {
content:"\f19a";
}
.icon-status-shutdown:before {
content:"\f19b";
}
.icon-status-warning:before {
content:"\f19c";
}
.icon-subnet:before {
content:"\f19d";
}
.icon-swf:before {
content:"\f19e";
}
.icon-system-information:before {
content:"\f19f";
}
.icon-template-list:before {
content:"\f1a0";
}
.icon-tfcloud:before {
content:"\f1a1";
}
.icon-ticket:before {
content:"\f1a2";
}
.icon-tiff:before {
content:"\f1a3";
}
.icon-topology:before {
content:"\f1a4";
}
.icon-txt:before {
content:"\f1a5";
}
.icon-ubuntu:before {
content:"\f1a6";
}
.icon-upload:before {
content:"\f1a7";
}
.icon-user-group:before {
content:"\f1a8";
}
.icon-user:before {
content:"\f1a9";
}
.icon-video-account-management:before {
content:"\f1aa";
}
.icon-vnc:before {
content:"\f1ab";
}
.icon-volume:before {
content:"\f1ac";
}
.icon-vpn:before {
content:"\f1ad";
}
.icon-windows:before {
content:"\f1ae";
}
.icon-wma:before {
content:"\f1af";
}
.icon-xls:before {
content:"\f1b0";
}
.icon-zip:before {
content:"\f1b1";
}
</style>
</head>
<body>
<h1>icons</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="about"><i class="glyphicon icon-about"></i> icon-about</div>
<div class="icons__item" data-name="account-charge"><i class="glyphicon icon-account-charge"></i> icon-account-charge</div>
<div class="icons__item" data-name="active-yes"><i class="glyphicon icon-active-yes"></i> icon-active-yes</div>
<div class="icons__item" data-name="active"><i class="glyphicon icon-active"></i> icon-active</div>
<div class="icons__item" data-name="add-notice"><i class="glyphicon icon-add-notice"></i> icon-add-notice</div>
<div class="icons__item" data-name="address-scope"><i class="glyphicon icon-address-scope"></i> icon-address-scope</div>
<div class="icons__item" data-name="app-center"><i class="glyphicon icon-app-center"></i> icon-app-center</div>
<div class="icons__item" data-name="applications"><i class="glyphicon icon-applications"></i> icon-applications</div>
<div class="icons__item" data-name="arch"><i class="glyphicon icon-arch"></i> icon-arch</div>
<div class="icons__item" data-name="arrow-down"><i class="glyphicon icon-arrow-down"></i> icon-arrow-down</div>
<div class="icons__item" data-name="arrow-left"><i class="glyphicon icon-arrow-left"></i> icon-arrow-left</div>
<div class="icons__item" data-name="arrow-right"><i class="glyphicon icon-arrow-right"></i> icon-arrow-right</div>
<div class="icons__item" data-name="arrow-up"><i class="glyphicon icon-arrow-up"></i> icon-arrow-up</div>
<div class="icons__item" data-name="associate"><i class="glyphicon icon-associate"></i> icon-associate</div>
<div class="icons__item" data-name="avatar"><i class="glyphicon icon-avatar"></i> icon-avatar</div>
<div class="icons__item" data-name="backup"><i class="glyphicon icon-backup"></i> icon-backup</div>
<div class="icons__item" data-name="billing-record"><i class="glyphicon icon-billing-record"></i> icon-billing-record</div>
<div class="icons__item" data-name="billing"><i class="glyphicon icon-billing"></i> icon-billing</div>
<div class="icons__item" data-name="bucket"><i class="glyphicon icon-bucket"></i> icon-bucket</div>
<div class="icons__item" data-name="bw-in"><i class="glyphicon icon-bw-in"></i> icon-bw-in</div>
<div class="icons__item" data-name="bw-out"><i class="glyphicon icon-bw-out"></i> icon-bw-out</div>
<div class="icons__item" data-name="cache-config"><i class="glyphicon icon-cache-config"></i> icon-cache-config</div>
<div class="icons__item" data-name="cache"><i class="glyphicon icon-cache"></i> icon-cache</div>
<div class="icons__item" data-name="calendar"><i class="glyphicon icon-calendar"></i> icon-calendar</div>
<div class="icons__item" data-name="cc-video"><i class="glyphicon icon-cc-video"></i> icon-cc-video</div>
<div class="icons__item" data-name="centos"><i class="glyphicon icon-centos"></i> icon-centos</div>
<div class="icons__item" data-name="charge-record"><i class="glyphicon icon-charge-record"></i> icon-charge-record</div>
<div class="icons__item" data-name="close"><i class="glyphicon icon-close"></i> icon-close</div>
<div class="icons__item" data-name="cloud-video"><i class="glyphicon icon-cloud-video"></i> icon-cloud-video</div>
<div class="icons__item" data-name="collaboration"><i class="glyphicon icon-collaboration"></i> icon-collaboration</div>
<div class="icons__item" data-name="copy"><i class="glyphicon icon-copy"></i> icon-copy</div>
<div class="icons__item" data-name="coreos"><i class="glyphicon icon-coreos"></i> icon-coreos</div>
<div class="icons__item" data-name="correct"><i class="glyphicon icon-correct"></i> icon-correct</div>
<div class="icons__item" data-name="cpu"><i class="glyphicon icon-cpu"></i> icon-cpu</div>
<div class="icons__item" data-name="create"><i class="glyphicon icon-create"></i> icon-create</div>
<div class="icons__item" data-name="database-config"><i class="glyphicon icon-database-config"></i> icon-database-config</div>
<div class="icons__item" data-name="database"><i class="glyphicon icon-database"></i> icon-database</div>
<div class="icons__item" data-name="debian"><i class="glyphicon icon-debian"></i> icon-debian</div>
<div class="icons__item" data-name="delete"><i class="glyphicon icon-delete"></i> icon-delete</div>
<div class="icons__item" data-name="deploy"><i class="glyphicon icon-deploy"></i> icon-deploy</div>
<div class="icons__item" data-name="disable"><i class="glyphicon icon-disable"></i> icon-disable</div>
<div class="icons__item" data-name="dissociate"><i class="glyphicon icon-dissociate"></i> icon-dissociate</div>
<div class="icons__item" data-name="doc"><i class="glyphicon icon-doc"></i> icon-doc</div>
<div class="icons__item" data-name="docx"><i class="glyphicon icon-docx"></i> icon-docx</div>
<div class="icons__item" data-name="domain"><i class="glyphicon icon-domain"></i> icon-domain</div>
<div class="icons__item" data-name="double-arrow-left"><i class="glyphicon icon-double-arrow-left"></i> icon-double-arrow-left</div>
<div class="icons__item" data-name="double-arrow-right"><i class="glyphicon icon-double-arrow-right"></i> icon-double-arrow-right</div>
<div class="icons__item" data-name="download"><i class="glyphicon icon-download"></i> icon-download</div>
<div class="icons__item" data-name="dropdown"><i class="glyphicon icon-dropdown"></i> icon-dropdown</div>
<div class="icons__item" data-name="edit"><i class="glyphicon icon-edit"></i> icon-edit</div>
<div class="icons__item" data-name="empty"><i class="glyphicon icon-empty"></i> icon-empty</div>
<div class="icons__item" data-name="enable"><i class="glyphicon icon-enable"></i> icon-enable</div>
<div class="icons__item" data-name="epc-suse"><i class="glyphicon icon-epc-suse"></i> icon-epc-suse</div>
<div class="icons__item" data-name="exe"><i class="glyphicon icon-exe"></i> icon-exe</div>
<div class="icons__item" data-name="eye"><i class="glyphicon icon-eye"></i> icon-eye</div>
<div class="icons__item" data-name="fedora"><i class="glyphicon icon-fedora"></i> icon-fedora</div>
<div class="icons__item" data-name="file-sharing"><i class="glyphicon icon-file-sharing"></i> icon-file-sharing</div>
<div class="icons__item" data-name="file"><i class="glyphicon icon-file"></i> icon-file</div>
<div class="icons__item" data-name="filter-collapse"><i class="glyphicon icon-filter-collapse"></i> icon-filter-collapse</div>
<div class="icons__item" data-name="filter-expand"><i class="glyphicon icon-filter-expand"></i> icon-filter-expand</div>
<div class="icons__item" data-name="flavor-setting"><i class="glyphicon icon-flavor-setting"></i> icon-flavor-setting</div>
<div class="icons__item" data-name="flavor"><i class="glyphicon icon-flavor"></i> icon-flavor</div>
<div class="icons__item" data-name="floating-ip"><i class="glyphicon icon-floating-ip"></i> icon-floating-ip</div>
<div class="icons__item" data-name="flv"><i class="glyphicon icon-flv"></i> icon-flv</div>
<div class="icons__item" data-name="folder"><i class="glyphicon icon-folder"></i> icon-folder</div>
<div class="icons__item" data-name="freebsd"><i class="glyphicon icon-freebsd"></i> icon-freebsd</div>
<div class="icons__item" data-name="g-admin"><i class="glyphicon icon-g-admin"></i> icon-g-admin</div>
<div class="icons__item" data-name="g-approval"><i class="glyphicon icon-g-approval"></i> icon-g-approval</div>
<div class="icons__item" data-name="g-bill"><i class="glyphicon icon-g-bill"></i> icon-g-bill</div>
<div class="icons__item" data-name="g-calamari"><i class="glyphicon icon-g-calamari"></i> icon-g-calamari</div>
<div class="icons__item" data-name="g-dashboard"><i class="glyphicon icon-g-dashboard"></i> icon-g-dashboard</div>
<div class="icons__item" data-name="g-ec2"><i class="glyphicon icon-g-ec2"></i> icon-g-ec2</div>
<div class="icons__item" data-name="g-grafana"><i class="glyphicon icon-g-grafana"></i> icon-g-grafana</div>
<div class="icons__item" data-name="g-rds"><i class="glyphicon icon-g-rds"></i> icon-g-rds</div>
<div class="icons__item" data-name="g-storage"><i class="glyphicon icon-g-storage"></i> icon-g-storage</div>
<div class="icons__item" data-name="g-subaccount"><i class="glyphicon icon-g-subaccount"></i> icon-g-subaccount</div>
<div class="icons__item" data-name="g-ticket"><i class="glyphicon icon-g-ticket"></i> icon-g-ticket</div>
<div class="icons__item" data-name="g-union"><i class="glyphicon icon-g-union"></i> icon-g-union</div>
<div class="icons__item" data-name="g-vmware"><i class="glyphicon icon-g-vmware"></i> icon-g-vmware</div>
<div class="icons__item" data-name="g-vpc"><i class="glyphicon icon-g-vpc"></i> icon-g-vpc</div>
<div class="icons__item" data-name="gentoo"><i class="glyphicon icon-gentoo"></i> icon-gentoo</div>
<div class="icons__item" data-name="global"><i class="glyphicon icon-global"></i> icon-global</div>
<div class="icons__item" data-name="heat-list"><i class="glyphicon icon-heat-list"></i> icon-heat-list</div>
<div class="icons__item" data-name="help"><i class="glyphicon icon-help"></i> icon-help</div>
<div class="icons__item" data-name="host-aggregates"><i class="glyphicon icon-host-aggregates"></i> icon-host-aggregates</div>
<div class="icons__item" data-name="host"><i class="glyphicon icon-host"></i> icon-host</div>
<div class="icons__item" data-name="image"><i class="glyphicon icon-image"></i> icon-image</div>
<div class="icons__item" data-name="ingress"><i class="glyphicon icon-ingress"></i> icon-ingress</div>
<div class="icons__item" data-name="instance-snapshot"><i class="glyphicon icon-instance-snapshot"></i> icon-instance-snapshot</div>
<div class="icons__item" data-name="instance"><i class="glyphicon icon-instance"></i> icon-instance</div>
<div class="icons__item" data-name="invoice"><i class="glyphicon icon-invoice"></i> icon-invoice</div>
<div class="icons__item" data-name="jpg"><i class="glyphicon icon-jpg"></i> icon-jpg</div>
<div class="icons__item" data-name="keypair"><i class="glyphicon icon-keypair"></i> icon-keypair</div>
<div class="icons__item" data-name="lb"><i class="glyphicon icon-lb"></i> icon-lb</div>
<div class="icons__item" data-name="listener"><i class="glyphicon icon-listener"></i> icon-listener</div>
<div class="icons__item" data-name="loading"><i class="glyphicon icon-loading"></i> icon-loading</div>
<div class="icons__item" data-name="log"><i class="glyphicon icon-log"></i> icon-log</div>
<div class="icons__item" data-name="logout"><i class="glyphicon icon-logout"></i> icon-logout</div>
<div class="icons__item" data-name="m-swallow"><i class="glyphicon icon-m-swallow"></i> icon-m-swallow</div>
<div class="icons__item" data-name="memory"><i class="glyphicon icon-memory"></i> icon-memory</div>
<div class="icons__item" data-name="metadata-definition"><i class="glyphicon icon-metadata-definition"></i> icon-metadata-definition</div>
<div class="icons__item" data-name="monitor"><i class="glyphicon icon-monitor"></i> icon-monitor</div>
<div class="icons__item" data-name="more"><i class="glyphicon icon-more"></i> icon-more</div>
<div class="icons__item" data-name="mp3"><i class="glyphicon icon-mp3"></i> icon-mp3</div>
<div class="icons__item" data-name="mp4"><i class="glyphicon icon-mp4"></i> icon-mp4</div>
<div class="icons__item" data-name="mvb"><i class="glyphicon icon-mvb"></i> icon-mvb</div>
<div class="icons__item" data-name="network-qos"><i class="glyphicon icon-network-qos"></i> icon-network-qos</div>
<div class="icons__item" data-name="network"><i class="glyphicon icon-network"></i> icon-network</div>
<div class="icons__item" data-name="notice-management"><i class="glyphicon icon-notice-management"></i> icon-notice-management</div>
<div class="icons__item" data-name="notification"><i class="glyphicon icon-notification"></i> icon-notification</div>
<div class="icons__item" data-name="object-storage"><i class="glyphicon icon-object-storage"></i> icon-object-storage</div>
<div class="icons__item" data-name="opensuse"><i class="glyphicon icon-opensuse"></i> icon-opensuse</div>
<div class="icons__item" data-name="overview"><i class="glyphicon icon-overview"></i> icon-overview</div>
<div class="icons__item" data-name="pdf"><i class="glyphicon icon-pdf"></i> icon-pdf</div>
<div class="icons__item" data-name="performance"><i class="glyphicon icon-performance"></i> icon-performance</div>
<div class="icons__item" data-name="png"><i class="glyphicon icon-png"></i> icon-png</div>
<div class="icons__item" data-name="port"><i class="glyphicon icon-port"></i> icon-port</div>
<div class="icons__item" data-name="power-off"><i class="glyphicon icon-power-off"></i> icon-power-off</div>
<div class="icons__item" data-name="power-on"><i class="glyphicon icon-power-on"></i> icon-power-on</div>
<div class="icons__item" data-name="ppt"><i class="glyphicon icon-ppt"></i> icon-ppt</div>
<div class="icons__item" data-name="pptx"><i class="glyphicon icon-pptx"></i> icon-pptx</div>
<div class="icons__item" data-name="project"><i class="glyphicon icon-project"></i> icon-project</div>
<div class="icons__item" data-name="property"><i class="glyphicon icon-property"></i> icon-property</div>
<div class="icons__item" data-name="question"><i class="glyphicon icon-question"></i> icon-question</div>
<div class="icons__item" data-name="quota-approval"><i class="glyphicon icon-quota-approval"></i> icon-quota-approval</div>
<div class="icons__item" data-name="rar"><i class="glyphicon icon-rar"></i> icon-rar</div>
<div class="icons__item" data-name="red-hat"><i class="glyphicon icon-red-hat"></i> icon-red-hat</div>
<div class="icons__item" data-name="redhat"><i class="glyphicon icon-redhat"></i> icon-redhat</div>
<div class="icons__item" data-name="redirect-policy"><i class="glyphicon icon-redirect-policy"></i> icon-redirect-policy</div>
<div class="icons__item" data-name="refresh"><i class="glyphicon icon-refresh"></i> icon-refresh</div>
<div class="icons__item" data-name="region"><i class="glyphicon icon-region"></i> icon-region</div>
<div class="icons__item" data-name="registration-approval"><i class="glyphicon icon-registration-approval"></i> icon-registration-approval</div>
<div class="icons__item" data-name="remove"><i class="glyphicon icon-remove"></i> icon-remove</div>
<div class="icons__item" data-name="resource-pool"><i class="glyphicon icon-resource-pool"></i> icon-resource-pool</div>
<div class="icons__item" data-name="restart"><i class="glyphicon icon-restart"></i> icon-restart</div>
<div class="icons__item" data-name="rmvb"><i class="glyphicon icon-rmvb"></i> icon-rmvb</div>
<div class="icons__item" data-name="role"><i class="glyphicon icon-role"></i> icon-role</div>
<div class="icons__item" data-name="router"><i class="glyphicon icon-router"></i> icon-router</div>
<div class="icons__item" data-name="s-lock"><i class="glyphicon icon-s-lock"></i> icon-s-lock</div>
<div class="icons__item" data-name="s-unlock"><i class="glyphicon icon-s-unlock"></i> icon-s-unlock</div>
<div class="icons__item" data-name="search"><i class="glyphicon icon-search"></i> icon-search</div>
<div class="icons__item" data-name="security-group"><i class="glyphicon icon-security-group"></i> icon-security-group</div>
<div class="icons__item" data-name="security-log"><i class="glyphicon icon-security-log"></i> icon-security-log</div>
<div class="icons__item" data-name="select-down"><i class="glyphicon icon-select-down"></i> icon-select-down</div>
<div class="icons__item" data-name="setting"><i class="glyphicon icon-setting"></i> icon-setting</div>
<div class="icons__item" data-name="sles"><i class="glyphicon icon-sles"></i> icon-sles</div>
<div class="icons__item" data-name="snapshot"><i class="glyphicon icon-snapshot"></i> icon-snapshot</div>
<div class="icons__item" data-name="status-active"><i class="glyphicon icon-status-active"></i> icon-status-active</div>
<div class="icons__item" data-name="status-approving"><i class="glyphicon icon-status-approving"></i> icon-status-approving</div>
<div class="icons__item" data-name="status-deleted"><i class="glyphicon icon-status-deleted"></i> icon-status-deleted</div>
<div class="icons__item" data-name="status-disabled"><i class="glyphicon icon-status-disabled"></i> icon-status-disabled</div>
<div class="icons__item" data-name="status-light"><i class="glyphicon icon-status-light"></i> icon-status-light</div>
<div class="icons__item" data-name="status-paused"><i class="glyphicon icon-status-paused"></i> icon-status-paused</div>
<div class="icons__item" data-name="status-pending"><i class="glyphicon icon-status-pending"></i> icon-status-pending</div>
<div class="icons__item" data-name="status-shutdown"><i class="glyphicon icon-status-shutdown"></i> icon-status-shutdown</div>
<div class="icons__item" data-name="status-warning"><i class="glyphicon icon-status-warning"></i> icon-status-warning</div>
<div class="icons__item" data-name="subnet"><i class="glyphicon icon-subnet"></i> icon-subnet</div>
<div class="icons__item" data-name="swf"><i class="glyphicon icon-swf"></i> icon-swf</div>
<div class="icons__item" data-name="system-information"><i class="glyphicon icon-system-information"></i> icon-system-information</div>
<div class="icons__item" data-name="template-list"><i class="glyphicon icon-template-list"></i> icon-template-list</div>
<div class="icons__item" data-name="tfcloud"><i class="glyphicon icon-tfcloud"></i> icon-tfcloud</div>
<div class="icons__item" data-name="ticket"><i class="glyphicon icon-ticket"></i> icon-ticket</div>
<div class="icons__item" data-name="tiff"><i class="glyphicon icon-tiff"></i> icon-tiff</div>
<div class="icons__item" data-name="topology"><i class="glyphicon icon-topology"></i> icon-topology</div>
<div class="icons__item" data-name="txt"><i class="glyphicon icon-txt"></i> icon-txt</div>
<div class="icons__item" data-name="ubuntu"><i class="glyphicon icon-ubuntu"></i> icon-ubuntu</div>
<div class="icons__item" data-name="upload"><i class="glyphicon icon-upload"></i> icon-upload</div>
<div class="icons__item" data-name="user-group"><i class="glyphicon icon-user-group"></i> icon-user-group</div>
<div class="icons__item" data-name="user"><i class="glyphicon icon-user"></i> icon-user</div>
<div class="icons__item" data-name="video-account-management"><i class="glyphicon icon-video-account-management"></i> icon-video-account-management</div>
<div class="icons__item" data-name="vnc"><i class="glyphicon icon-vnc"></i> icon-vnc</div>
<div class="icons__item" data-name="volume"><i class="glyphicon icon-volume"></i> icon-volume</div>
<div class="icons__item" data-name="vpn"><i class="glyphicon icon-vpn"></i> icon-vpn</div>
<div class="icons__item" data-name="windows"><i class="glyphicon icon-windows"></i> icon-windows</div>
<div class="icons__item" data-name="wma"><i class="glyphicon icon-wma"></i> icon-wma</div>
<div class="icons__item" data-name="xls"><i class="glyphicon icon-xls"></i> icon-xls</div>
<div class="icons__item" data-name="zip"><i class="glyphicon icon-zip"></i> icon-zip</div>
</div>
<h1>Usage</h1>
<pre><code><i class="glyphicon icon-<span id="name">name</span>"></i></code></pre>
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
<script>
(function() {
document.getElementById('icons').onclick = function(e) {
e = e || window.event;
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name').innerHTML = name;
}
})();
</script>
</body>
</html>