app/assets/icons/spina/preview/ics_spina-preview.html
<!DOCTYPE html>
<html>
<head>
<title>ics_spina glyphs preview</title>
<style>
/* Page Styles */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #444;
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a,
a:visited {
color: #888;
text-decoration: underline;
}
a:hover,
a:focus { color: #000; }
header {
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
overflow: hidden;
padding: 20px 0;
}
header h1 {
color: #888;
float: left;
font-size: 36px;
font-weight: 300;
}
header a {
float: right;
font-size: 14px;
}
.container {
margin: 0 auto;
max-width: 1200px;
min-width: 960px;
padding: 0 40px;
width: 90%;
}
.glyph {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.preview-glyphs { vertical-align: bottom; }
.preview-scale {
color: #888;
font-size: 12px;
margin-top: 5px;
}
.step {
display: inline-block;
line-height: 1;
position: relative;
width: 10%;
}
.step .letters,
.step i {
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.step:hover .letters { opacity: 1; }
.step:hover i { opacity: .3; }
.letters {
opacity: .3;
position: absolute;
}
.characters-off .letters { display: none; }
.characters-off .step:hover i { opacity: 1; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
.usage { margin-top: 10px; }
.usage input {
font-family: monospace;
margin-right: 3px;
padding: 2px 5px;
text-align: center;
}
.usage .point { width: 150px; }
.usage .class { width: 250px; }
footer {
color: #888;
font-size: 12px;
padding: 20px 0;
}
/* Icon Font: ics_spina */
@font-face {
font-family: "ics_spina";
src: url("../../../fonts/spina/ics_spina.eot");
src: url("../../../fonts/spina/ics_spina.eot?#iefix") format("embedded-opentype"),
url("../../../fonts/spina/ics_spina.woff2") format("woff2"),
url("../../../fonts/spina/ics_spina.woff") format("woff"),
url("../../../fonts/spina/ics_spina.ttf") format("truetype"),
url("../../../fonts/spina/ics_spina.svg#ics_spina") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "ics_spina";
src: url("../../../fonts/spina/ics_spina.svg#ics_spina") format("svg");
}
}
[data-icon]:before { content: attr(data-icon); }
[data-icon]:before,
.icon-barchart:before,
.icon-bars:before,
.icon-bold:before,
.icon-brush:before,
.icon-camera:before,
.icon-caret-down:before,
.icon-caret-left:before,
.icon-caret-right:before,
.icon-caret-up:before,
.icon-cart:before,
.icon-chart-outline:before,
.icon-check:before,
.icon-chevron-down:before,
.icon-chevron-left:before,
.icon-chevron-right:before,
.icon-chevron-up:before,
.icon-code:before,
.icon-cog:before,
.icon-cog-outline:before,
.icon-comment:before,
.icon-cross:before,
.icon-customer-outline:before,
.icon-document:before,
.icon-dots:before,
.icon-exclamation:before,
.icon-export:before,
.icon-eye:before,
.icon-filter:before,
.icon-home:before,
.icon-image:before,
.icon-inbox-outline:before,
.icon-indent:before,
.icon-info:before,
.icon-italic:before,
.icon-large-check:before,
.icon-link:before,
.icon-list:before,
.icon-list-ol:before,
.icon-list-ul:before,
.icon-lock:before,
.icon-mail:before,
.icon-mail-outline:before,
.icon-media-library:before,
.icon-megaphone:before,
.icon-min:before,
.icon-outdent:before,
.icon-pages:before,
.icon-pencil:before,
.icon-pencil-outline:before,
.icon-picture-o:before,
.icon-plus:before,
.icon-power-off:before,
.icon-preview:before,
.icon-product-outline:before,
.icon-quote-right:before,
.icon-random:before,
.icon-redo:before,
.icon-refresh:before,
.icon-search:before,
.icon-shop:before,
.icon-social-outline:before,
.icon-strikethrough:before,
.icon-trash:before,
.icon-undo:before,
.icon-upload-outline:before,
.icon-users-outline:before {
display: inline-block;
font-family: "ics_spina";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.icon-barchart:before { content: "\f100"; }
.icon-bars:before { content: "\f101"; }
.icon-bold:before { content: "\f102"; }
.icon-brush:before { content: "\f103"; }
.icon-camera:before { content: "\f104"; }
.icon-caret-down:before { content: "\f105"; }
.icon-caret-left:before { content: "\f106"; }
.icon-caret-right:before { content: "\f107"; }
.icon-caret-up:before { content: "\f108"; }
.icon-cart:before { content: "\f109"; }
.icon-chart-outline:before { content: "\f10a"; }
.icon-check:before { content: "\f10b"; }
.icon-chevron-down:before { content: "\f10c"; }
.icon-chevron-left:before { content: "\f10d"; }
.icon-chevron-right:before { content: "\f10e"; }
.icon-chevron-up:before { content: "\f10f"; }
.icon-code:before { content: "\f110"; }
.icon-cog:before { content: "\f111"; }
.icon-cog-outline:before { content: "\f112"; }
.icon-comment:before { content: "\f113"; }
.icon-cross:before { content: "\f114"; }
.icon-customer-outline:before { content: "\f115"; }
.icon-document:before { content: "\f116"; }
.icon-dots:before { content: "\f117"; }
.icon-exclamation:before { content: "\f118"; }
.icon-export:before { content: "\f139"; }
.icon-eye:before { content: "\f119"; }
.icon-filter:before { content: "\f11a"; }
.icon-home:before { content: "\f11b"; }
.icon-image:before { content: "\f11c"; }
.icon-inbox-outline:before { content: "\f11d"; }
.icon-indent:before { content: "\f13a"; }
.icon-info:before { content: "\f11e"; }
.icon-italic:before { content: "\f11f"; }
.icon-large-check:before { content: "\f120"; }
.icon-link:before { content: "\f121"; }
.icon-list:before { content: "\f13b"; }
.icon-list-ol:before { content: "\f13c"; }
.icon-list-ul:before { content: "\f122"; }
.icon-lock:before { content: "\f138"; }
.icon-mail:before { content: "\f123"; }
.icon-mail-outline:before { content: "\f124"; }
.icon-media-library:before { content: "\f125"; }
.icon-megaphone:before { content: "\f126"; }
.icon-min:before { content: "\f127"; }
.icon-outdent:before { content: "\f141"; }
.icon-pages:before { content: "\f128"; }
.icon-pencil:before { content: "\f129"; }
.icon-pencil-outline:before { content: "\f12a"; }
.icon-picture-o:before { content: "\f12b"; }
.icon-plus:before { content: "\f12c"; }
.icon-power-off:before { content: "\f12d"; }
.icon-preview:before { content: "\f12e"; }
.icon-product-outline:before { content: "\f12f"; }
.icon-quote-right:before { content: "\f13d"; }
.icon-random:before { content: "\f130"; }
.icon-redo:before { content: "\f13e"; }
.icon-refresh:before { content: "\f131"; }
.icon-search:before { content: "\f132"; }
.icon-shop:before { content: "\f133"; }
.icon-social-outline:before { content: "\f134"; }
.icon-strikethrough:before { content: "\f13f"; }
.icon-trash:before { content: "\f135"; }
.icon-undo:before { content: "\f140"; }
.icon-upload-outline:before { content: "\f136"; }
.icon-users-outline:before { content: "\f137"; }
</style>
<script>
function toggleCharacters() {
var body = document.getElementsByTagName('body')[0];
body.className = body.className === 'characters-off' ? '' : 'characters-off';
}
</script>
</head>
<body class="characters-off">
<div id="page" class="container">
<header>
<h1>ics_spina contains 66 glyphs:</h1>
<a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
</header>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-barchart" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf100;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bars" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf101;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bold" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf102;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-brush" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf103;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-camera" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf104;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-down" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf105;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-left" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf106;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-right" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf107;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-up" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf108;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cart" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf109;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chart-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10a;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-check" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-down" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-left" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10d;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-right" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10e;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-up" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-code" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf110;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cog" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf111;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cog-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf112;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-comment" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf113;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cross" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf114;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-customer-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf115;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-document" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf116;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-dots" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf117;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-exclamation" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf118;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-export" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf139;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-eye" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf119;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-filter" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11a;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-home" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-image" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-inbox-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11d;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-indent" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13a;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-info" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11e;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-italic" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-large-check" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf120;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-link" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf121;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list-ol" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list-ul" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf122;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-lock" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf138;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mail" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf123;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mail-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf124;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-media-library" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf125;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-megaphone" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf126;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-min" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf127;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-outdent" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf141;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pages" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf128;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pencil" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf129;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pencil-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12a;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-picture-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-plus" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-power-off" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12d;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-preview" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12e;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-product-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-quote-right" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13d;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-random" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf130;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-redo" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13e;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-refresh" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf131;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-search" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf132;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-shop" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf133;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-social-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf134;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-strikethrough" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-trash" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf135;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-undo" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf140;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-upload-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf136;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-users-outline" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf137;" />
</div>
</div>
<footer>
Made with love using <a href="http://fontcustom.com">Font Custom</a>.
</footer>
</div>
</body>
</html>