assets/fonts/styleguide/fauxtonicon-preview.html - couchdb-fauxton - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <title>fauxtonicon 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: fauxtonicon */

       @font-face {
   font-family: "fauxtonicon";
   src: url("../fauxtonicon.eot");
   src: url("../fauxtonicon.eot?#iefix") format("embedded-opentype"),
        url("../fauxtonicon.woff") format("woff"),
        url("../fauxtonicon.ttf") format("truetype"),
        url("../fauxtonicon.svg#fauxtonicon") format("svg");
   font-weight: normal;
   font-style: normal;
 }

 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: "fauxtonicon";
     src: url("../fauxtonicon.svg#fauxtonicon") 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-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-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-wrench:before {
         display: inline-block;
   font-family: "fauxtonicon";
   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-gears:before { content: "\f126"; }
 .fonticon-help:before { content: "\f127"; }
 .fonticon-help-circled:before { content: "\f128"; }
 .fonticon-info-circled:before { content: "\f129"; }
 .fonticon-json:before { content: "\f12a"; }
 .fonticon-key:before { content: "\f12b"; }
 .fonticon-left:before { content: "\f12c"; }
 .fonticon-left-1:before { content: "\f12d"; }
 .fonticon-left-circled:before { content: "\f12e"; }
 .fonticon-left-dir:before { content: "\f12f"; }
 .fonticon-left-open:before { content: "\f130"; }
 .fonticon-link:before { content: "\f131"; }
 .fonticon-list-alt:before { content: "\f132"; }
 .fonticon-lock:before { content: "\f133"; }
 .fonticon-mail:before { content: "\f134"; }
 .fonticon-mail-alt:before { content: "\f135"; }
 .fonticon-megaphone:before { content: "\f136"; }
 .fonticon-minus:before { content: "\f137"; }
 .fonticon-minus-circled:before { content: "\f138"; }
 .fonticon-minus-circled2:before { content: "\f139"; }
 .fonticon-minus-squared:before { content: "\f13a"; }
 .fonticon-minus-squared-alt:before { content: "\f13b"; }
 .fonticon-mixer:before { content: "\f13c"; }
 .fonticon-new-database:before { content: "\f13d"; }
 .fonticon-ok:before { content: "\f13e"; }
 .fonticon-ok-circled:before { content: "\f13f"; }
 .fonticon-ok-circled-2:before { content: "\f140"; }
 .fonticon-paperclip:before { content: "\f141"; }
 .fonticon-pencil:before { content: "\f142"; }
 .fonticon-picture:before { content: "\f143"; }
 .fonticon-play:before { content: "\f144"; }
 .fonticon-plus:before { content: "\f145"; }
 .fonticon-plus-circled:before { content: "\f146"; }
 .fonticon-plus-circled2:before { content: "\f147"; }
 .fonticon-plus-squared:before { content: "\f148"; }
 .fonticon-plus-squared-alt:before { content: "\f149"; }
 .fonticon-popin:before { content: "\f14a"; }
 .fonticon-popout:before { content: "\f14b"; }
 .fonticon-profile:before { content: "\f14c"; }
 .fonticon-replicate:before { content: "\f14d"; }
 .fonticon-reply:before { content: "\f14e"; }
 .fonticon-reply-all:before { content: "\f14f"; }
 .fonticon-resize-full:before { content: "\f150"; }
 .fonticon-resize-full-reverse:before { content: "\f151"; }
 .fonticon-resize-small:before { content: "\f152"; }
 .fonticon-resize-small-reverse:before { content: "\f153"; }
 .fonticon-right:before { content: "\f154"; }
 .fonticon-right-1:before { content: "\f155"; }
 .fonticon-right-circled:before { content: "\f156"; }
 .fonticon-right-dir:before { content: "\f157"; }
 .fonticon-right-open:before { content: "\f158"; }
 .fonticon-save:before { content: "\f159"; }
 .fonticon-search:before { content: "\f15a"; }
 .fonticon-select-all:before { content: "\f15b"; }
 .fonticon-sidenav-filter-function:before { content: "\f15c"; }
 .fonticon-sidenav-info:before { content: "\f15d"; }
 .fonticon-sidenav-list-function:before { content: "\f15e"; }
 .fonticon-sidenav-map-reduce:before { content: "\f15f"; }
 .fonticon-sidenav-search:before { content: "\f160"; }
 .fonticon-sidenav-show-function:before { content: "\f161"; }
 .fonticon-sidenav-update-function:before { content: "\f162"; }
 .fonticon-sitemap:before { content: "\f163"; }
 .fonticon-stats:before { content: "\f164"; }
 .fonticon-support:before { content: "\f165"; }
 .fonticon-swap-arrows:before { content: "\f166"; }
 .fonticon-table:before { content: "\f167"; }
 .fonticon-trash:before { content: "\f168"; }
 .fonticon-up:before { content: "\f169"; }
 .fonticon-up-1:before { content: "\f16a"; }
 .fonticon-up-circled:before { content: "\f16b"; }
 .fonticon-up-dir:before { content: "\f16c"; }
 .fonticon-up-open:before { content: "\f16d"; }
 .fonticon-user:before { content: "\f16e"; }
 .fonticon-users:before { content: "\f16f"; }
 .fonticon-wrench:before { content: "\f170"; }
     </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>fauxtonicon contains 113 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="fonticon-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</span><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="fonticon-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><span 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 class="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="fonticon-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="step 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" class="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="fonticon-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 size-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="fonticon-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</span><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="letters">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-empty" 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><span 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="fonticon-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 size-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><span 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 size-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-all" 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 size-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><span 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="fonticon-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" class="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-circled" 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 size-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><span 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</span><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 size-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-gears" class="fonticon-gears"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-gears" class="fonticon-gears"></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-gears" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-help" class="fonticon-help"></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-help" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-help-circled" class="fonticon-help-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-help-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-info-circled" class="fonticon-info-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-info-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-json" class="fonticon-json"></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-json" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-key" class="fonticon-key"></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-key" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-left" class="fonticon-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-left" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-left-1" class="fonticon-left-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-left-1" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-left-circled" class="fonticon-left-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-left-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-dir"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-left-dir" class="fonticon-left-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-left-dir" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-open"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-left-open" class="fonticon-left-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-left-open" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-link" class="fonticon-link"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-link" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-alt"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-list-alt" class="fonticon-list-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-list-alt" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf132;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-lock" class="fonticon-lock"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-lock" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-mail" class="fonticon-mail"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-mail" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf134;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-alt"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-mail-alt" class="fonticon-mail-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-mail-alt" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf135;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-megaphone" class="fonticon-megaphone"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-megaphone" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf136;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-minus" class="fonticon-minus"></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-minus" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf137;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-minus-circled" class="fonticon-minus-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-minus-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf138;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-circled2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-minus-circled2" class="fonticon-minus-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-minus-circled2" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf139;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-minus-squared" class="fonticon-minus-squared"></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-minus-squared" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13a;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-alt"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-minus-squared-alt" class="fonticon-minus-squared-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-minus-squared-alt" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13b;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-mixer" class="fonticon-mixer"></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-mixer" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13c;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-database"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-new-database" class="fonticon-new-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-new-database" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13d;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-ok" class="fonticon-ok"></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-ok" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13e;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-ok-circled" class="fonticon-ok-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-ok-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13f;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-ok-circled-2" class="fonticon-ok-circled-2"></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-ok-circled-2" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf140;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-paperclip" class="fonticon-paperclip"></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-paperclip" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf141;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-pencil" class="fonticon-pencil"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-pencil" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf142;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-picture" class="fonticon-picture"></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-picture" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf143;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-play" class="fonticon-play"></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-play" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf144;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-plus" class="fonticon-plus"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-plus" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf145;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-plus-circled" class="fonticon-plus-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-plus-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf146;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-circled2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-plus-circled2" class="fonticon-plus-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-plus-circled2" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf147;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-plus-squared" class="fonticon-plus-squared"></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-plus-squared" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf148;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-alt"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-plus-squared-alt" class="fonticon-plus-squared-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-plus-squared-alt" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf149;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-popin" class="fonticon-popin"></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-popin" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14a;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-popout" class="fonticon-popout"></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-popout" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14b;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-profile" class="fonticon-profile"></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-profile" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14c;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-replicate" class="fonticon-replicate"></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-replicate" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14d;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-reply" class="fonticon-reply"></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-reply" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14e;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-all"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-reply-all" class="fonticon-reply-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-reply-all" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14f;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-resize-full" class="fonticon-resize-full"></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-resize-full" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf150;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-resize-full-reverse" class="fonticon-resize-full-reverse"></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-resize-full-reverse" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf151;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-resize-small" class="fonticon-resize-small"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-resize-small" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf152;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-resize-small-reverse" class="fonticon-resize-small-reverse"></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-resize-small-reverse" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf153;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-right" class="fonticon-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-right" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf154;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-right-1" class="fonticon-right-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-right-1" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf155;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-right-circled" class="fonticon-right-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-right-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf156;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-dir"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-right-dir" class="fonticon-right-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-right-dir" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf157;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-open"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-right-open" class="fonticon-right-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-right-open" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf158;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-save" class="fonticon-save"></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-save" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf159;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-search" class="fonticon-search"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-search" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15a;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-all"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-select-all" class="fonticon-select-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-select-all" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15b;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-filter-function" class="fonticon-sidenav-filter-function"></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-sidenav-filter-function" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15c;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-info" class="fonticon-sidenav-info"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-sidenav-info" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15d;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-list-function" class="fonticon-sidenav-list-function"></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-sidenav-list-function" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15e;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-map-reduce" class="fonticon-sidenav-map-reduce"></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-sidenav-map-reduce" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15f;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-search" class="fonticon-sidenav-search"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-sidenav-search" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf160;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-show-function" class="fonticon-sidenav-show-function"></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-sidenav-show-function" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf161;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sidenav-update-function" class="fonticon-sidenav-update-function"></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-sidenav-update-function" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf162;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-sitemap" class="fonticon-sitemap"></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-sitemap" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf163;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-stats" class="fonticon-stats"></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-stats" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf164;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-support" class="fonticon-support"></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-support" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf165;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-swap-arrows" class="fonticon-swap-arrows"></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-swap-arrows" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf166;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-table" class="fonticon-table"></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-table" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf167;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-trash" class="fonticon-trash"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fonticon-trash" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf168;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-up" class="fonticon-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-up" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf169;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-up-1" class="fonticon-up-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-up-1" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16a;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-circled"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-up-circled" class="fonticon-up-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-up-circled" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16b;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-dir"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-up-dir" class="fonticon-up-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-up-dir" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16c;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-open"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-up-open" class="fonticon-up-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-up-open" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16d;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-user" class="fonticon-user"></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-user" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16e;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-users" class="fonticon-users"></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-users" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16f;" />
         </div>
       </div>

       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fonticon-wrench" class="fonticon-wrench"></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-wrench" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf170;" />
         </div>
       </div>


       <footer>
         Made with love using <a href="http://fontcustom.com">Font Custom</a>.
       </footer>
     </div>
   </body>
 </html>