|
<!DOCTYPE html>
<html>
<head>
<title>avalanche_icons 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: avalanche_icons */
@font-face {
font-family: "avalanche_icons";
src: url("../assets/avalanche_icons_3d245f25153d8fe510efd22ff8197c7b.eot");
src: url("../assets/avalanche_icons_3d245f25153d8fe510efd22ff8197c7b.eot?#iefix") format("embedded-opentype"),
url("../assets/avalanche_icons_3d245f25153d8fe510efd22ff8197c7b.woff") format("woff"),
url("../assets/avalanche_icons_3d245f25153d8fe510efd22ff8197c7b.ttf") format("truetype"),
url("../assets/avalanche_icons_3d245f25153d8fe510efd22ff8197c7b.svg#avalanche_icons") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "avalanche_icons";
src: url("../assets/avalanche_icons_3d245f25153d8fe510efd22ff8197c7b.svg#avalanche_icons") format("svg");
}
}
[data-icon]:before { content: attr(data-icon); }
[data-icon]:before,
.icon-agent:before,
.icon-agent-circle:before,
.icon-avalanche:before,
.icon-bullet:before,
.icon-chat:before,
.icon-flaged:before,
.icon-lab:before,
.icon-message:before,
.icon-mission:before,
.icon-objective:before,
.icon-radar:before,
.icon-reward:before,
.icon-task:before,
.icon-validation:before {
display: inline-block;
font-family: "avalanche_icons";
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-agent:before { content: "\f100"; }
.icon-agent-circle:before { content: "\f107"; }
.icon-avalanche:before { content: "\f101"; }
.icon-bullet:before { content: "\f108"; }
.icon-chat:before { content: "\f102"; }
.icon-flaged:before { content: "\f10e"; }
.icon-lab:before { content: "\f10a"; }
.icon-message:before { content: "\f10b"; }
.icon-mission:before { content: "\f103"; }
.icon-objective:before { content: "\f10c"; }
.icon-radar:before { content: "\f104"; }
.icon-reward:before { content: "\f105"; }
.icon-task:before { content: "\f106"; }
.icon-validation:before { content: "\f10d"; }
</style>
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<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>avalanche_icons contains 14 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-agent" class="icon-agent"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-agent" class="icon-agent"></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-agent" />
<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-agent-circle" class="icon-agent-circle"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-agent-circle" class="icon-agent-circle"></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-agent-circle" />
<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-avalanche" class="icon-avalanche"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-avalanche" class="icon-avalanche"></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-avalanche" />
<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-bullet" class="icon-bullet"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bullet" class="icon-bullet"></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-bullet" />
<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-chat" class="icon-chat"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chat" class="icon-chat"></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-chat" />
<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-flaged" class="icon-flaged"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-flaged" class="icon-flaged"></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-flaged" />
<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-lab" class="icon-lab"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-lab" class="icon-lab"></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-lab" />
<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-message" class="icon-message"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-message" class="icon-message"></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-message" />
<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-mission" class="icon-mission"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-mission" class="icon-mission"></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-mission" />
<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-objective" class="icon-objective"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-objective" class="icon-objective"></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-objective" />
<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-radar" class="icon-radar"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-radar" class="icon-radar"></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-radar" />
<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-reward" class="icon-reward"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-reward" class="icon-reward"></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-reward" />
<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-task" class="icon-task"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-task" class="icon-task"></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-task" />
<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-validation" class="icon-validation"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-validation" class="icon-validation"></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-validation" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10d;" />
</div>
</div>
<footer>
Made with love using <a href="http://fontcustom.com">Font Custom</a>.
</footer>
</div>
</body>
</html>
|
