[3/8] fauxton commit: updated refs/heads/master to c9bf8a5

Thu, 03 Mar 2016 10:02:42 -0800 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/79271629/assets/fonts/styleguide/fauxtonicon3-preview.html
----------------------------------------------------------------------
diff --git a/assets/fonts/styleguide/fauxtonicon3-preview.html 
b/assets/fonts/styleguide/fauxtonicon3-preview.html
new file mode 100644
index 0000000..18ddadf
--- /dev/null
+++ b/assets/fonts/styleguide/fauxtonicon3-preview.html
@@ -0,0 +1,1973 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>fauxtonicon3 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: fauxtonicon3 */
+
+      @font-face {
+  font-family: "fauxtonicon3";
+  src: url("../fauxtonicon3.eot");
+  src: url("../fauxtonicon3.eot?#iefix") format("embedded-opentype"),
+       url("../fauxtonicon3.woff") format("woff"),
+       url("../fauxtonicon3.ttf") format("truetype"),
+       url("../fauxtonicon3.svg#fauxtonicon3") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "fauxtonicon3";
+    src: url("../fauxtonicon3.svg#fauxtonicon3") format("svg");
+  }
+}
+
+      [data-icon]:before { content: attr(data-icon); }
+
+      [data-icon]:before,
+      .fonticon-activetasks:before,
+.fonticon-arrow-box-down:before,
+.fonticon-arrow-box-up:before,
+.fonticon-arrow_left:before,
+.fonticon-arrow_right:before,
+.fonticon-arrows-cw:before,
+.fonticon-article:before,
+.fonticon-attention-alt:before,
+.fonticon-attention-circled:before,
+.fonticon-bell:before,
+.fonticon-block:before,
+.fonticon-bookmark:before,
+.fonticon-bookmark-ribbon-wplus:before,
+.fonticon-burger:before,
+.fonticon-cancel:before,
+.fonticon-cancel-circled:before,
+.fonticon-cancel-circled2:before,
+.fonticon-circle-empty:before,
+.fonticon-clipboard:before,
+.fonticon-clock:before,
+.fonticon-cog:before,
+.fonticon-collapse:before,
+.fonticon-cw:before,
+.fonticon-dashboard:before,
+.fonticon-database:before,
+.fonticon-deselect-all:before,
+.fonticon-document:before,
+.fonticon-documents:before,
+.fonticon-dot-circled:before,
+.fonticon-down:before,
+.fonticon-down-1:before,
+.fonticon-down-circled:before,
+.fonticon-down-dir:before,
+.fonticon-down-open:before,
+.fonticon-drop-down-dots:before,
+.fonticon-exchange:before,
+.fonticon-expand:before,
+.fonticon-eye:before,
+.fonticon-file-code-o:before,
+.fonticon-files-o:before,
+.fonticon-gears:before,
+.fonticon-help:before,
+.fonticon-help-circled:before,
+.fonticon-info-circled:before,
+.fonticon-json:before,
+.fonticon-key:before,
+.fonticon-left:before,
+.fonticon-left-1:before,
+.fonticon-left-circled:before,
+.fonticon-left-dir:before,
+.fonticon-left-open:before,
+.fonticon-link:before,
+.fonticon-list-alt:before,
+.fonticon-lock:before,
+.fonticon-mail:before,
+.fonticon-mail-alt:before,
+.fonticon-map:before,
+.fonticon-map2:before,
+.fonticon-megaphone:before,
+.fonticon-minus:before,
+.fonticon-minus-circled:before,
+.fonticon-minus-circled2:before,
+.fonticon-minus-squared:before,
+.fonticon-minus-squared-alt:before,
+.fonticon-mixer:before,
+.fonticon-new-database:before,
+.fonticon-ok:before,
+.fonticon-ok-circled:before,
+.fonticon-ok-circled-2:before,
+.fonticon-paperclip:before,
+.fonticon-pencil:before,
+.fonticon-picture:before,
+.fonticon-play:before,
+.fonticon-plus:before,
+.fonticon-plus-circled:before,
+.fonticon-plus-circled2:before,
+.fonticon-plus-squared:before,
+.fonticon-plus-squared-alt:before,
+.fonticon-popin:before,
+.fonticon-popout:before,
+.fonticon-profile:before,
+.fonticon-replicate:before,
+.fonticon-reply:before,
+.fonticon-reply-all:before,
+.fonticon-resize-full:before,
+.fonticon-resize-full-reverse:before,
+.fonticon-resize-small:before,
+.fonticon-resize-small-reverse:before,
+.fonticon-right:before,
+.fonticon-right-1:before,
+.fonticon-right-circled:before,
+.fonticon-right-dir:before,
+.fonticon-right-open:before,
+.fonticon-save:before,
+.fonticon-search:before,
+.fonticon-select-all:before,
+.fonticon-sidenav-filter-function:before,
+.fonticon-sidenav-info:before,
+.fonticon-sidenav-list-function:before,
+.fonticon-sidenav-map-reduce:before,
+.fonticon-sidenav-search:before,
+.fonticon-sidenav-show-function:before,
+.fonticon-sidenav-update-function:before,
+.fonticon-sitemap:before,
+.fonticon-stats:before,
+.fonticon-support:before,
+.fonticon-swap-arrows:before,
+.fonticon-table:before,
+.fonticon-trash:before,
+.fonticon-up:before,
+.fonticon-up-1:before,
+.fonticon-up-circled:before,
+.fonticon-up-dir:before,
+.fonticon-up-open:before,
+.fonticon-user:before,
+.fonticon-users:before,
+.fonticon-vertical-ellipsis:before,
+.fonticon-wrench:before {
+        display: inline-block;
+  font-family: "fauxtonicon3";
+  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;
+      }
+
+      .fonticon-activetasks:before { content: "\f100"; }
+.fonticon-arrow-box-down:before { content: "\f101"; }
+.fonticon-arrow-box-up:before { content: "\f102"; }
+.fonticon-arrow_left:before { content: "\f103"; }
+.fonticon-arrow_right:before { content: "\f104"; }
+.fonticon-arrows-cw:before { content: "\f105"; }
+.fonticon-article:before { content: "\f106"; }
+.fonticon-attention-alt:before { content: "\f107"; }
+.fonticon-attention-circled:before { content: "\f108"; }
+.fonticon-bell:before { content: "\f109"; }
+.fonticon-block:before { content: "\f10a"; }
+.fonticon-bookmark:before { content: "\f10b"; }
+.fonticon-bookmark-ribbon-wplus:before { content: "\f10c"; }
+.fonticon-burger:before { content: "\f10d"; }
+.fonticon-cancel:before { content: "\f10e"; }
+.fonticon-cancel-circled:before { content: "\f10f"; }
+.fonticon-cancel-circled2:before { content: "\f110"; }
+.fonticon-circle-empty:before { content: "\f111"; }
+.fonticon-clipboard:before { content: "\f112"; }
+.fonticon-clock:before { content: "\f113"; }
+.fonticon-cog:before { content: "\f114"; }
+.fonticon-collapse:before { content: "\f115"; }
+.fonticon-cw:before { content: "\f116"; }
+.fonticon-dashboard:before { content: "\f117"; }
+.fonticon-database:before { content: "\f118"; }
+.fonticon-deselect-all:before { content: "\f119"; }
+.fonticon-document:before { content: "\f11a"; }
+.fonticon-documents:before { content: "\f11b"; }
+.fonticon-dot-circled:before { content: "\f11c"; }
+.fonticon-down:before { content: "\f11d"; }
+.fonticon-down-1:before { content: "\f11e"; }
+.fonticon-down-circled:before { content: "\f11f"; }
+.fonticon-down-dir:before { content: "\f120"; }
+.fonticon-down-open:before { content: "\f121"; }
+.fonticon-drop-down-dots:before { content: "\f122"; }
+.fonticon-exchange:before { content: "\f123"; }
+.fonticon-expand:before { content: "\f124"; }
+.fonticon-eye:before { content: "\f125"; }
+.fonticon-file-code-o:before { content: "\f126"; }
+.fonticon-files-o:before { content: "\f127"; }
+.fonticon-gears:before { content: "\f128"; }
+.fonticon-help:before { content: "\f129"; }
+.fonticon-help-circled:before { content: "\f12a"; }
+.fonticon-info-circled:before { content: "\f12b"; }
+.fonticon-json:before { content: "\f12c"; }
+.fonticon-key:before { content: "\f12d"; }
+.fonticon-left:before { content: "\f12e"; }
+.fonticon-left-1:before { content: "\f12f"; }
+.fonticon-left-circled:before { content: "\f130"; }
+.fonticon-left-dir:before { content: "\f131"; }
+.fonticon-left-open:before { content: "\f132"; }
+.fonticon-link:before { content: "\f133"; }
+.fonticon-list-alt:before { content: "\f134"; }
+.fonticon-lock:before { content: "\f135"; }
+.fonticon-mail:before { content: "\f136"; }
+.fonticon-mail-alt:before { content: "\f137"; }
+.fonticon-map:before { content: "\f138"; }
+.fonticon-map2:before { content: "\f139"; }
+.fonticon-megaphone:before { content: "\f13a"; }
+.fonticon-minus:before { content: "\f13b"; }
+.fonticon-minus-circled:before { content: "\f13c"; }
+.fonticon-minus-circled2:before { content: "\f13d"; }
+.fonticon-minus-squared:before { content: "\f13e"; }
+.fonticon-minus-squared-alt:before { content: "\f13f"; }
+.fonticon-mixer:before { content: "\f140"; }
+.fonticon-new-database:before { content: "\f141"; }
+.fonticon-ok:before { content: "\f142"; }
+.fonticon-ok-circled:before { content: "\f143"; }
+.fonticon-ok-circled-2:before { content: "\f144"; }
+.fonticon-paperclip:before { content: "\f145"; }
+.fonticon-pencil:before { content: "\f146"; }
+.fonticon-picture:before { content: "\f147"; }
+.fonticon-play:before { content: "\f148"; }
+.fonticon-plus:before { content: "\f149"; }
+.fonticon-plus-circled:before { content: "\f14a"; }
+.fonticon-plus-circled2:before { content: "\f14b"; }
+.fonticon-plus-squared:before { content: "\f14c"; }
+.fonticon-plus-squared-alt:before { content: "\f14d"; }
+.fonticon-popin:before { content: "\f14e"; }
+.fonticon-popout:before { content: "\f14f"; }
+.fonticon-profile:before { content: "\f150"; }
+.fonticon-replicate:before { content: "\f151"; }
+.fonticon-reply:before { content: "\f152"; }
+.fonticon-reply-all:before { content: "\f153"; }
+.fonticon-resize-full:before { content: "\f154"; }
+.fonticon-resize-full-reverse:before { content: "\f155"; }
+.fonticon-resize-small:before { content: "\f156"; }
+.fonticon-resize-small-reverse:before { content: "\f157"; }
+.fonticon-right:before { content: "\f158"; }
+.fonticon-right-1:before { content: "\f159"; }
+.fonticon-right-circled:before { content: "\f15a"; }
+.fonticon-right-dir:before { content: "\f15b"; }
+.fonticon-right-open:before { content: "\f15c"; }
+.fonticon-save:before { content: "\f15d"; }
+.fonticon-search:before { content: "\f15e"; }
+.fonticon-select-all:before { content: "\f15f"; }
+.fonticon-sidenav-filter-function:before { content: "\f160"; }
+.fonticon-sidenav-info:before { content: "\f161"; }
+.fonticon-sidenav-list-function:before { content: "\f162"; }
+.fonticon-sidenav-map-reduce:before { content: "\f163"; }
+.fonticon-sidenav-search:before { content: "\f164"; }
+.fonticon-sidenav-show-function:before { content: "\f165"; }
+.fonticon-sidenav-update-function:before { content: "\f166"; }
+.fonticon-sitemap:before { content: "\f167"; }
+.fonticon-stats:before { content: "\f168"; }
+.fonticon-support:before { content: "\f169"; }
+.fonticon-swap-arrows:before { content: "\f16a"; }
+.fonticon-table:before { content: "\f16b"; }
+.fonticon-trash:before { content: "\f16c"; }
+.fonticon-up:before { content: "\f16d"; }
+.fonticon-up-1:before { content: "\f16e"; }
+.fonticon-up-circled:before { content: "\f16f"; }
+.fonticon-up-dir:before { content: "\f170"; }
+.fonticon-up-open:before { content: "\f171"; }
+.fonticon-user:before { content: "\f172"; }
+.fonticon-users:before { content: "\f173"; }
+.fonticon-vertical-ellipsis:before { content: "\f174"; }
+.fonticon-wrench:before { content: "\f175"; }
+    </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>fauxtonicon3 contains 118 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="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="fonticon-activetasks"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i 
id="fonticon-activetasks" class="font
 icon-activetasks"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-activetasks" 
class="fonticon-activetasks"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-activetasks" 
class="fonticon-activetasks"></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=".fonticon-activetasks" />
+          <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="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-down" class="fonticon-arrow-box-down"></i></span><span 
class="step size-48"><span class="letters">Pp</spa
 n><i id="fonticon-arrow-box-down" 
class="fonticon-arrow-box-down"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-arrow-box-down" 
class="fonticon-arrow-box-down"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-arrow-box-down" 
class="fonticon-arrow-box-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=".fonticon-arrow-box-down" />
+          <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="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-arrow-box-up" class="fonticon-arrow-box-up"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i id="fonticon-arrow-box-
 up" class="fonticon-arrow-box-up"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-arrow-box-up" 
class="fonticon-arrow-box-up"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-arrow-box-up" 
class="fonticon-arrow-box-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=".fonticon-arrow-box-up" />
+          <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="fonticon-arrow_left" class="fonticon-arrow_left"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-arrow_left"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-arrow_left"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-arrow_left"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-arrow_left"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-arrow_left"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-arrow_left"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-arrow_left" class="fonticon-arrow_left
 "></i></span><span class="step size-60"><span class="letters">Pp</span><i 
id="fonticon-arrow_left" class="fonticon-arrow_left"></i></span><span 
class="step size-72"><span class="letters">Pp</span><i id="fonticon-arrow_left" 
class="fonticon-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=".fonticon-arrow_left" />
+          <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="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="fonticon-arrow_right"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i 
id="fonticon-arrow_right" class="font
 icon-arrow_right"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-arrow_right" 
class="fonticon-arrow_right"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-arrow_right" 
class="fonticon-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=".fonticon-arrow_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="fonticon-arrows-cw" class="fonticon-arrows-cw"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></i></span><sp
 an class="step size-60"><span class="letters">Pp</span><i 
id="fonticon-arrows-cw" class="fonticon-arrows-cw"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-arrows-cw" 
class="fonticon-arrows-cw"></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=".fonticon-arrows-cw" />
+          <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="fonticon-article" class="fonticon-article"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-60"><span cl
 ass="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-article" 
class="fonticon-article"></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=".fonticon-article" />
+          <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="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-attention-alt" class="fonticon-attention-alt"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i id="fonti
 con-attention-alt" class="fonticon-attention-alt"></i></span><span class="step 
size-60"><span class="letters">Pp</span><i id="fonticon-attention-alt" 
class="fonticon-attention-alt"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-attention-alt" 
class="fonticon-attention-alt"></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=".fonticon-attention-alt" />
+          <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="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-14"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="s
 tep size-48"><span class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-attention-circled" 
class="fonticon-attention-circled"></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=".fonticon-attention-circled" />
+          <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="fonticon-bell" class="fonticon-bell"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-bell" 
class="fonticon-bell"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-bell" cla
 ss="fonticon-bell"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-bell" class="fonticon-bell"></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=".fonticon-bell" />
+          <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="fonticon-block" class="fonticon-block"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fo
 nticon-block" class="fonticon-block"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-block" 
class="fonticon-block"></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=".fonticon-block" />
+          <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="fonticon-bookmark" class="fonticon-bookmark"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step s
 ize-60"><span class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-bookmark" 
class="fonticon-bookmark"></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=".fonticon-bookmark" />
+          <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="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-16"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-18"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-21"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-24"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-36"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="f
 onticon-bookmark-ribbon-wplus"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-60"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-bookmark-ribbon-wplus" 
class="fonticon-bookmark-ribbon-wplus"></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=".fonticon-bookmark-ribbon-wplus" />
+          <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="fonticon-burger" class="fonticon-burger"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></i></span><span class="step size-60"><span 
class="letters">Pp
 </span><i id="fonticon-burger" class="fonticon-burger"></i></span><span 
class="step size-72"><span class="letters">Pp</span><i id="fonticon-burger" 
class="fonticon-burger"></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=".fonticon-burger" />
+          <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="fonticon-cancel" class="fonticon-cancel"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></i></span><span class="step size-60"><span 
class="letters">Pp
 </span><i id="fonticon-cancel" class="fonticon-cancel"></i></span><span 
class="step size-72"><span class="letters">Pp</span><i id="fonticon-cancel" 
class="fonticon-cancel"></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=".fonticon-cancel" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf10e;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled" class="fonticon-cancel-circled"></i></span><span 
class="step size-48"><span class="letters">Pp</spa
 n><i id="fonticon-cancel-circled" 
class="fonticon-cancel-circled"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-cancel-circled" 
class="fonticon-cancel-circled"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-cancel-circled" 
class="fonticon-cancel-circled"></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=".fonticon-cancel-circled" />
+          <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="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-cancel-circled2" class="fonticon-cancel-circled2"></i></span><span 
class="step size-48"><span class="le
 tters">Pp</span><i id="fonticon-cancel-circled2" 
class="fonticon-cancel-circled2"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-cancel-circled2" 
class="fonticon-cancel-circled2"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-cancel-circled2" 
class="fonticon-cancel-circled2"></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=".fonticon-cancel-circled2" />
+          <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="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-circle-empty" class="fonticon-circle-empty"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i id="fonticon-circle-emp
 ty" class="fonticon-circle-empty"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-circle-empty" 
class="fonticon-circle-empty"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-circle-empty" 
class="fonticon-circle-empty"></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=".fonticon-circle-empty" />
+          <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="fonticon-clipboard" class="fonticon-clipboard"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></i></span><sp
 an class="step size-60"><span class="letters">Pp</span><i 
id="fonticon-clipboard" class="fonticon-clipboard"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-clipboard" 
class="fonticon-clipboard"></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=".fonticon-clipboard" />
+          <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="fonticon-clock" class="fonticon-clock"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fo
 nticon-clock" class="fonticon-clock"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-clock" 
class="fonticon-clock"></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=".fonticon-clock" />
+          <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="fonticon-cog" class="fonticon-cog"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-cog" 
class="fonticon-cog"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-cog" class="fonticon-cog"
 ></i></span><span class="step size-72"><span class="letters">Pp</span><i 
 >id="fonticon-cog" class="fonticon-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=".fonticon-cog" />
+          <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="fonticon-collapse" class="fonticon-collapse"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step s
 ize-60"><span class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-collapse" 
class="fonticon-collapse"></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=".fonticon-collapse" />
+          <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="fonticon-cw" class="fonticon-cw"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></i></span><span 
 class="step size-72"><span class="letters">Pp</span><i id="fonticon-cw" 
class="fonticon-cw"></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=".fonticon-cw" />
+          <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="fonticon-dashboard" class="fonticon-dashboard"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></i></span><sp
 an class="step size-60"><span class="letters">Pp</span><i 
id="fonticon-dashboard" class="fonticon-dashboard"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-dashboard" 
class="fonticon-dashboard"></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=".fonticon-dashboard" />
+          <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="fonticon-database" class="fonticon-database"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step s
 ize-60"><span class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-database" 
class="fonticon-database"></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=".fonticon-database" />
+          <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="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-deselect-all" class="fonticon-deselect-all"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i id="fonticon-deselect-a
 ll" class="fonticon-deselect-all"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-deselect-all" 
class="fonticon-deselect-all"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-deselect-all" 
class="fonticon-deselect-all"></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=".fonticon-deselect-all" />
+          <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="fonticon-document" class="fonticon-document"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step s
 ize-60"><span class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-document"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-document" 
class="fonticon-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=".fonticon-document" />
+          <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="fonticon-documents" class="fonticon-documents"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></i></span><sp
 an class="step size-60"><span class="letters">Pp</span><i 
id="fonticon-documents" class="fonticon-documents"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-documents" 
class="fonticon-documents"></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=".fonticon-documents" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf11b;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="fonticon-dot-circled"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i 
id="fonticon-dot-circled" class="font
 icon-dot-circled"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-dot-circled" 
class="fonticon-dot-circled"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-dot-circled" 
class="fonticon-dot-circled"></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=".fonticon-dot-circled" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf11c;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-down" class="fonticon-down"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-down" 
class="fonticon-down"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-down" cla
 ss="fonticon-down"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-down" class="fonticon-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=".fonticon-down" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf11d;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-down-1" class="fonticon-down-1"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></i></span><span class="step size-60"><span 
class="letters">Pp
 </span><i id="fonticon-down-1" class="fonticon-down-1"></i></span><span 
class="step size-72"><span class="letters">Pp</span><i id="fonticon-down-1" 
class="fonticon-down-1"></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=".fonticon-down-1" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf11e;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-down-circled" class="fonticon-down-circled"></i></span><span 
class="step size-48"><span class="letters">Pp</span><i id="fonticon-down-circl
 ed" class="fonticon-down-circled"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-down-circled" 
class="fonticon-down-circled"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-down-circled" 
class="fonticon-down-circled"></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=".fonticon-down-circled" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf11f;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-down-dir" class="fonticon-down-dir"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step s
 ize-60"><span class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-down-dir" 
class="fonticon-down-dir"></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=".fonticon-down-dir" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf120;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-down-open" class="fonticon-down-open"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></i></span><sp
 an class="step size-60"><span class="letters">Pp</span><i 
id="fonticon-down-open" class="fonticon-down-open"></i></span><span class="step 
size-72"><span class="letters">Pp</span><i id="fonticon-down-open" 
class="fonticon-down-open"></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=".fonticon-down-open" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf121;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-14"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-16"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-18"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-21"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-24"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-36"><span class="letters">Pp</span><i 
id="fonticon-drop-down-dots" class="fonticon-drop-down-dots"></i></span><span 
class="step size-48"><span class="letters">Pp</spa
 n><i id="fonticon-drop-down-dots" 
class="fonticon-drop-down-dots"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-drop-down-dots" 
class="fonticon-drop-down-dots"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-drop-down-dots" 
class="fonticon-drop-down-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=".fonticon-drop-down-dots" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf122;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-exchange" class="fonticon-exchange"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step s
 ize-60"><span class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></i></span><span class="step size-72"><span 
class="letters">Pp</span><i id="fonticon-exchange" 
class="fonticon-exchange"></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=".fonticon-exchange" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf123;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-expand" class="fonticon-expand"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></i></span><span class="step size-60"><span 
class="letters">Pp
 </span><i id="fonticon-expand" class="fonticon-expand"></i></span><span 
class="step size-72"><span class="letters">Pp</span><i id="fonticon-expand" 
class="fonticon-expand"></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=".fonticon-expand" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf124;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-eye" class="fonticon-eye"></i></span><span class="step 
size-14"><span class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-16"><span 
class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-18"><span 
class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-21"><span 
class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-24"><span 
class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-36"><span 
class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-48"><span 
class="letters">Pp</span><i id="fonticon-eye" 
class="fonticon-eye"></i></span><span class="step size-60"><span 
class="letters">Pp</span><i id="fonticon-eye" class="fonticon-eye"
 ></i></span><span class="step size-72"><span class="letters">Pp</span><i 
 >id="fonticon-eye" class="fonticon-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=".fonticon-eye" />
+          <input class="point" type="text" readonly="readonly" 
onClick="this.select();" value="&amp;#xf125;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i 
id="fonticon-file-code-o" class="fonticon-file-code-o"></i></spa

<TRUNCATED>

Reply via email to