Skip to content

Instantly share code, notes, and snippets.

@tveimo

tveimo/netbeans-retina-slow

Last active August 29, 2015 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tveimo/5b68b3735ec71cb8ce16 to your computer and use it in GitHub Desktop.
Save tveimo/5b68b3735ec71cb8ce16 to your computer and use it in GitHub Desktop.
Download ZIP
example HTML file that scrolls with about 1 screen update per 2 seconds on OSX on my MBP Retina 15"
Raw
netbeans-retina-slow
<!DOCTYPE html>
<html>
<head>
<title>glyphs preview</title>
<style>
/* Page Styles */
.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; }
</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>karriere contains 61 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="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-advanced-search-icon" class="ka-advanced-search-icon"></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=".ka-advanced-search-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow" class="ka-arrow"></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=".ka-arrow" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow-circle-down" class="ka-arrow-circle-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=".ka-arrow-circle-down" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow-down" class="ka-arrow-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=".ka-arrow-down" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow-grey-right" class="ka-arrow-grey-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=".ka-arrow-grey-right" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow-left" class="ka-arrow-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=".ka-arrow-left" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow-right" class="ka-arrow-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=".ka-arrow-right" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-arrow-up" class="ka-arrow-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=".ka-arrow-up" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-checkbox-blue-check" class="ka-checkbox-blue-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=".ka-checkbox-blue-check" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-checkbox-blue-clear" class="ka-checkbox-blue-clear"></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=".ka-checkbox-blue-clear" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-checkbox-yellow-check" class="ka-checkbox-yellow-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=".ka-checkbox-yellow-check" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-checkbox-yellow-clear" class="ka-checkbox-yellow-clear"></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=".ka-checkbox-yellow-clear" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-clock-small" class="ka-clock-small"></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=".ka-clock-small" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-close-white" class="ka-close-white"></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=".ka-close-white" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-dash" class="ka-dash"></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=".ka-dash" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-delete-icon" class="ka-delete-icon"></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=".ka-delete-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-doc" class="ka-doc"></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=".ka-doc" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-edu-icon" class="ka-edu-icon"></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=".ka-edu-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-email-jobs" class="ka-email-jobs"></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=".ka-email-jobs" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-fb-icon" class="ka-fb-icon"></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=".ka-fb-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-file-icon" class="ka-file-icon"></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=".ka-file-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-i" class="ka-i"></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=".ka-i" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-icon-hit" class="ka-icon-hit"></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=".ka-icon-hit" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-icon-info-big" class="ka-icon-info-big"></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=".ka-icon-info-big" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-info-icon" class="ka-info-icon"></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=".ka-info-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ka-job-icon" class="ka-job-icon"></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=".ka-job-icon" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="ka-job-icon-alt" class="ka-job-icon-alt"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ka-job-icon-alt" class="ka-job-icon-alt"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ka-job-icon-alt" class="ka-job-icon-alt"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ka-job-icon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment