xmpp.chapril.org-conversejs/fonticons/index.html

791 lines
24 KiB
HTML

<!doctype html>
<html>
<head>
<title>Your Font/Glyphs</title>
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<style>
section, header, footer {display: block;}
body {
font-family: sans-serif;
color: #444;
line-height: 1.5;
font-size: 1em;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.glyph {
font-size: 16px;
float: left;
text-align: center;
background: #eee;
padding: .75em;
margin: .75em 1.5em .75em 0;
width: 7.5em;
border-radius: .25em;
box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
}
.glyph input {
font-family: consolas, monospace;
font-size: 13px;
width: 100%;
text-align: center;
border: 0;
box-shadow: 0 0 0 1px #ccc;
padding: .125em;
}
.w-main {
width: 80%;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.fs1 {
font-size: 2em;
}
header {
margin: 2em 0;
padding-bottom: .5em;
color: #666;
box-shadow: 0 2px #eee;
}
header h1 {
font-size: 2em;
font-weight: normal;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after, .clear { clear: both; }
footer {
margin-top: 2em;
padding: .5em 0;
box-shadow: 0 -2px #eee;
}
a, a:visited {
color: #B35047;
text-decoration: none;
}
a:hover, a:focus {color: #000;}
.box1 {
font-size: 16px;
display: inline-block;
width: 15em;
padding: .25em .5em;
background: #eee;
margin: .5em 1em .5em 0;
}
</style>
</head>
<body>
<div class="w-main centered">
<section class="mtm clearfix" id="glyphs">
<header>
<h1>Your font contains the following glyphs</h1>
<p>The generated SVG font can be imported back to <a href="http://icomoon.io/app">IcoMoon</a> for modification.</p>
</header>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div>
<input type="text" readonly="readonly" value="&amp;#xe000;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x270e;"></div>
<input type="text" readonly="readonly" value="&amp;#x270e;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
<input type="text" readonly="readonly" value="&amp;#xe003;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2616;"></div>
<input type="text" readonly="readonly" value="&amp;#x2616;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x25d9;"></div>
<input type="text" readonly="readonly" value="&amp;#x25d9;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x266b;"></div>
<input type="text" readonly="readonly" value="&amp;#x266b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x266c;"></div>
<input type="text" readonly="readonly" value="&amp;#x266c;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x260f;"></div>
<input type="text" readonly="readonly" value="&amp;#x260f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x260e;"></div>
<input type="text" readonly="readonly" value="&amp;#x260e;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x270f;"></div>
<input type="text" readonly="readonly" value="&amp;#x270f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2710;"></div>
<input type="text" readonly="readonly" value="&amp;#x2710;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2709;"></div>
<input type="text" readonly="readonly" value="&amp;#x2709;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe012;"></div>
<input type="text" readonly="readonly" value="&amp;#xe012;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x25fc;"></div>
<input type="text" readonly="readonly" value="&amp;#x25fc;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x25fb;"></div>
<input type="text" readonly="readonly" value="&amp;#x25fb;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe015;"></div>
<input type="text" readonly="readonly" value="&amp;#xe015;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe016;"></div>
<input type="text" readonly="readonly" value="&amp;#xe016;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe017;"></div>
<input type="text" readonly="readonly" value="&amp;#xe017;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe01a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe01a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe01b;"></div>
<input type="text" readonly="readonly" value="&amp;#xe01b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe01d;"></div>
<input type="text" readonly="readonly" value="&amp;#xe01d;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x231b;"></div>
<input type="text" readonly="readonly" value="&amp;#x231b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe021;"></div>
<input type="text" readonly="readonly" value="&amp;#xe021;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe022;"></div>
<input type="text" readonly="readonly" value="&amp;#xe022;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe024;"></div>
<input type="text" readonly="readonly" value="&amp;#xe024;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe025;"></div>
<input type="text" readonly="readonly" value="&amp;#xe025;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe026;"></div>
<input type="text" readonly="readonly" value="&amp;#xe026;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe027;"></div>
<input type="text" readonly="readonly" value="&amp;#xe027;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe028;"></div>
<input type="text" readonly="readonly" value="&amp;#xe028;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe029;"></div>
<input type="text" readonly="readonly" value="&amp;#xe029;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe02a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe02a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe02b;"></div>
<input type="text" readonly="readonly" value="&amp;#xe02b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe02f;"></div>
<input type="text" readonly="readonly" value="&amp;#xe02f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe02d;"></div>
<input type="text" readonly="readonly" value="&amp;#xe02d;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe02e;"></div>
<input type="text" readonly="readonly" value="&amp;#xe02e;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe030;"></div>
<input type="text" readonly="readonly" value="&amp;#xe030;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe031;"></div>
<input type="text" readonly="readonly" value="&amp;#xe031;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe032;"></div>
<input type="text" readonly="readonly" value="&amp;#xe032;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe033;"></div>
<input type="text" readonly="readonly" value="&amp;#xe033;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2764;"></div>
<input type="text" readonly="readonly" value="&amp;#x2764;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x263b;"></div>
<input type="text" readonly="readonly" value="&amp;#x263b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x261d;"></div>
<input type="text" readonly="readonly" value="&amp;#x261d;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x263a;"></div>
<input type="text" readonly="readonly" value="&amp;#x263a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe038;"></div>
<input type="text" readonly="readonly" value="&amp;#xe038;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2639;"></div>
<input type="text" readonly="readonly" value="&amp;#x2639;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe03a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe03a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2369;"></div>
<input type="text" readonly="readonly" value="&amp;#x2369;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2368;"></div>
<input type="text" readonly="readonly" value="&amp;#x2368;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2364;"></div>
<input type="text" readonly="readonly" value="&amp;#x2364;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x261f;"></div>
<input type="text" readonly="readonly" value="&amp;#x261f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe03f;"></div>
<input type="text" readonly="readonly" value="&amp;#xe03f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe040;"></div>
<input type="text" readonly="readonly" value="&amp;#xe040;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe041;"></div>
<input type="text" readonly="readonly" value="&amp;#xe041;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2360;"></div>
<input type="text" readonly="readonly" value="&amp;#x2360;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe01f;"></div>
<input type="text" readonly="readonly" value="&amp;#xe01f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x26a0;"></div>
<input type="text" readonly="readonly" value="&amp;#x26a0;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe045;"></div>
<input type="text" readonly="readonly" value="&amp;#xe045;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe046;"></div>
<input type="text" readonly="readonly" value="&amp;#xe046;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe047;"></div>
<input type="text" readonly="readonly" value="&amp;#xe047;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe048;"></div>
<input type="text" readonly="readonly" value="&amp;#xe048;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe049;"></div>
<input type="text" readonly="readonly" value="&amp;#xe049;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe04a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe04a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe04b;"></div>
<input type="text" readonly="readonly" value="&amp;#xe04b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe04c;"></div>
<input type="text" readonly="readonly" value="&amp;#xe04c;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe04d;"></div>
<input type="text" readonly="readonly" value="&amp;#xe04d;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe04e;"></div>
<input type="text" readonly="readonly" value="&amp;#xe04e;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe04f;"></div>
<input type="text" readonly="readonly" value="&amp;#xe04f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe050;"></div>
<input type="text" readonly="readonly" value="&amp;#xe050;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe053;"></div>
<input type="text" readonly="readonly" value="&amp;#xe053;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe055;"></div>
<input type="text" readonly="readonly" value="&amp;#xe055;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2715;"></div>
<input type="text" readonly="readonly" value="&amp;#x2715;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2718;"></div>
<input type="text" readonly="readonly" value="&amp;#x2718;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe058;"></div>
<input type="text" readonly="readonly" value="&amp;#xe058;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe05a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe05a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x271a;"></div>
<input type="text" readonly="readonly" value="&amp;#x271a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2611;"></div>
<input type="text" readonly="readonly" value="&amp;#x2611;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2b27;"></div>
<input type="text" readonly="readonly" value="&amp;#x2b27;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2b28;"></div>
<input type="text" readonly="readonly" value="&amp;#x2b28;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2b26;"></div>
<input type="text" readonly="readonly" value="&amp;#x2b26;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2b25;"></div>
<input type="text" readonly="readonly" value="&amp;#x2b25;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe059;"></div>
<input type="text" readonly="readonly" value="&amp;#xe059;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div>
<input type="text" readonly="readonly" value="&amp;#xe001;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#x2b14;"></div>
<input type="text" readonly="readonly" value="&amp;#x2b14;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>
<input type="text" readonly="readonly" value="&amp;#xe002;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe004;"></div>
<input type="text" readonly="readonly" value="&amp;#xe004;" />
</div>
</section>
<div class="clear"></div>
<section class="mtm clearfix" id="glyphs">
<header>
<h1>Class Names</h1>
</header>
<span class="box1">
<span aria-hidden="true" class="icon-home"></span>
&nbsp;icon-home
</span>
<span class="box1">
<span aria-hidden="true" class="icon-pencil"></span>
&nbsp;icon-pencil
</span>
<span class="box1">
<span aria-hidden="true" class="icon-camera"></span>
&nbsp;icon-camera
</span>
<span class="box1">
<span aria-hidden="true" class="icon-camera-2"></span>
&nbsp;icon-camera-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-play"></span>
&nbsp;icon-play
</span>
<span class="box1">
<span aria-hidden="true" class="icon-music"></span>
&nbsp;icon-music
</span>
<span class="box1">
<span aria-hidden="true" class="icon-headphones"></span>
&nbsp;icon-headphones
</span>
<span class="box1">
<span aria-hidden="true" class="icon-phone"></span>
&nbsp;icon-phone
</span>
<span class="box1">
<span aria-hidden="true" class="icon-phone-hang-up"></span>
&nbsp;icon-phone-hang-up
</span>
<span class="box1">
<span aria-hidden="true" class="icon-address-book"></span>
&nbsp;icon-address-book
</span>
<span class="box1">
<span aria-hidden="true" class="icon-notebook"></span>
&nbsp;icon-notebook
</span>
<span class="box1">
<span aria-hidden="true" class="icon-envelop"></span>
&nbsp;icon-envelop
</span>
<span class="box1">
<span aria-hidden="true" class="icon-pushpin"></span>
&nbsp;icon-pushpin
</span>
<span class="box1">
<span aria-hidden="true" class="icon-bubble"></span>
&nbsp;icon-bubble
</span>
<span class="box1">
<span aria-hidden="true" class="icon-bubble-2"></span>
&nbsp;icon-bubble-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-bubbles"></span>
&nbsp;icon-bubbles
</span>
<span class="box1">
<span aria-hidden="true" class="icon-bubbles-2"></span>
&nbsp;icon-bubbles-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-bubbles-3"></span>
&nbsp;icon-bubbles-3
</span>
<span class="box1">
<span aria-hidden="true" class="icon-user"></span>
&nbsp;icon-user
</span>
<span class="box1">
<span aria-hidden="true" class="icon-users"></span>
&nbsp;icon-users
</span>
<span class="box1">
<span aria-hidden="true" class="icon-quotes-left"></span>
&nbsp;icon-quotes-left
</span>
<span class="box1">
<span aria-hidden="true" class="icon-spinner"></span>
&nbsp;icon-spinner
</span>
<span class="box1">
<span aria-hidden="true" class="icon-search"></span>
&nbsp;icon-search
</span>
<span class="box1">
<span aria-hidden="true" class="icon-cogs"></span>
&nbsp;icon-cogs
</span>
<span class="box1">
<span aria-hidden="true" class="icon-wrench"></span>
&nbsp;icon-wrench
</span>
<span class="box1">
<span aria-hidden="true" class="icon-unlocked"></span>
&nbsp;icon-unlocked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-lock"></span>
&nbsp;icon-lock
</span>
<span class="box1">
<span aria-hidden="true" class="icon-lock-2"></span>
&nbsp;icon-lock-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-key"></span>
&nbsp;icon-key
</span>
<span class="box1">
<span aria-hidden="true" class="icon-key-2"></span>
&nbsp;icon-key-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-zoom-out"></span>
&nbsp;icon-zoom-out
</span>
<span class="box1">
<span aria-hidden="true" class="icon-zoom-in"></span>
&nbsp;icon-zoom-in
</span>
<span class="box1">
<span aria-hidden="true" class="icon-cog"></span>
&nbsp;icon-cog
</span>
<span class="box1">
<span aria-hidden="true" class="icon-remove"></span>
&nbsp;icon-remove
</span>
<span class="box1">
<span aria-hidden="true" class="icon-remove-2"></span>
&nbsp;icon-remove-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-eye"></span>
&nbsp;icon-eye
</span>
<span class="box1">
<span aria-hidden="true" class="icon-eye-blocked"></span>
&nbsp;icon-eye-blocked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-attachment"></span>
&nbsp;icon-attachment
</span>
<span class="box1">
<span aria-hidden="true" class="icon-globe"></span>
&nbsp;icon-globe
</span>
<span class="box1">
<span aria-hidden="true" class="icon-heart"></span>
&nbsp;icon-heart
</span>
<span class="box1">
<span aria-hidden="true" class="icon-happy"></span>
&nbsp;icon-happy
</span>
<span class="box1">
<span aria-hidden="true" class="icon-thumbs-up"></span>
&nbsp;icon-thumbs-up
</span>
<span class="box1">
<span aria-hidden="true" class="icon-smiley"></span>
&nbsp;icon-smiley
</span>
<span class="box1">
<span aria-hidden="true" class="icon-tongue"></span>
&nbsp;icon-tongue
</span>
<span class="box1">
<span aria-hidden="true" class="icon-sad"></span>
&nbsp;icon-sad
</span>
<span class="box1">
<span aria-hidden="true" class="icon-wink"></span>
&nbsp;icon-wink
</span>
<span class="box1">
<span aria-hidden="true" class="icon-wondering"></span>
&nbsp;icon-wondering
</span>
<span class="box1">
<span aria-hidden="true" class="icon-confused"></span>
&nbsp;icon-confused
</span>
<span class="box1">
<span aria-hidden="true" class="icon-shocked"></span>
&nbsp;icon-shocked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-evil"></span>
&nbsp;icon-evil
</span>
<span class="box1">
<span aria-hidden="true" class="icon-angry"></span>
&nbsp;icon-angry
</span>
<span class="box1">
<span aria-hidden="true" class="icon-cool"></span>
&nbsp;icon-cool
</span>
<span class="box1">
<span aria-hidden="true" class="icon-grin"></span>
&nbsp;icon-grin
</span>
<span class="box1">
<span aria-hidden="true" class="icon-info"></span>
&nbsp;icon-info
</span>
<span class="box1">
<span aria-hidden="true" class="icon-notification"></span>
&nbsp;icon-notification
</span>
<span class="box1">
<span aria-hidden="true" class="icon-warning"></span>
&nbsp;icon-warning
</span>
<span class="box1">
<span aria-hidden="true" class="icon-spell-check"></span>
&nbsp;icon-spell-check
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-high"></span>
&nbsp;icon-volume-high
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-medium"></span>
&nbsp;icon-volume-medium
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-low"></span>
&nbsp;icon-volume-low
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-mute"></span>
&nbsp;icon-volume-mute
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-mute-2"></span>
&nbsp;icon-volume-mute-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-decrease"></span>
&nbsp;icon-volume-decrease
</span>
<span class="box1">
<span aria-hidden="true" class="icon-volume-increase"></span>
&nbsp;icon-volume-increase
</span>
<span class="box1">
<span aria-hidden="true" class="icon-bold"></span>
&nbsp;icon-bold
</span>
<span class="box1">
<span aria-hidden="true" class="icon-underline"></span>
&nbsp;icon-underline
</span>
<span class="box1">
<span aria-hidden="true" class="icon-italic"></span>
&nbsp;icon-italic
</span>
<span class="box1">
<span aria-hidden="true" class="icon-strikethrough"></span>
&nbsp;icon-strikethrough
</span>
<span class="box1">
<span aria-hidden="true" class="icon-new-tab"></span>
&nbsp;icon-new-tab
</span>
<span class="box1">
<span aria-hidden="true" class="icon-youtube"></span>
&nbsp;icon-youtube
</span>
<span class="box1">
<span aria-hidden="true" class="icon-close"></span>
&nbsp;icon-close
</span>
<span class="box1">
<span aria-hidden="true" class="icon-blocked"></span>
&nbsp;icon-blocked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-cancel-circle"></span>
&nbsp;icon-cancel-circle
</span>
<span class="box1">
<span aria-hidden="true" class="icon-minus"></span>
&nbsp;icon-minus
</span>
<span class="box1">
<span aria-hidden="true" class="icon-plus"></span>
&nbsp;icon-plus
</span>
<span class="box1">
<span aria-hidden="true" class="icon-checkbox-checked"></span>
&nbsp;icon-checkbox-checked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-checkbox-unchecked"></span>
&nbsp;icon-checkbox-unchecked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-checkbox-partial"></span>
&nbsp;icon-checkbox-partial
</span>
<span class="box1">
<span aria-hidden="true" class="icon-radio-checked"></span>
&nbsp;icon-radio-checked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-radio-unchecked"></span>
&nbsp;icon-radio-unchecked
</span>
<span class="box1">
<span aria-hidden="true" class="icon-info-2"></span>
&nbsp;icon-info-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-newspaper"></span>
&nbsp;icon-newspaper
</span>
<span class="box1">
<span aria-hidden="true" class="icon-image"></span>
&nbsp;icon-image
</span>
<span class="box1">
<span aria-hidden="true" class="icon-offline"></span>
&nbsp;icon-offline
</span>
<span class="box1">
<span aria-hidden="true" class="icon-busy"></span>
&nbsp;icon-busy
</span>
</section>
<footer>
<p>Generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
</footer>
</div>
<script>
document.getElementById("glyphs").addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT") {
target.select();
}
});
</script>
</body>
</html>