123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <div class="grid">
    <div class="width-1-1">
      <h1>Zurb Foundicon Cheat Sheet</h1>
      <h2>Hooray for codepen.</h2>
    </div>
    <div class="width-1-1">
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-address-book size-12"></i><i class="step fi-address-book size-14"></i><i class="step fi-address-book size-16"></i><i class="step fi-address-book size-18"></i><i class="step fi-address-book size-21"></i><i class="step fi-address-book size-24"></i><i class="step fi-address-book size-36"></i><i class="step fi-address-book size-48"></i><i class="step fi-address-book size-60"></i><i class="step fi-address-book size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-address-book" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-alert size-12"></i><i class="step fi-alert size-14"></i><i class="step fi-alert size-16"></i><i class="step fi-alert size-18"></i><i class="step fi-alert size-21"></i><i class="step fi-alert size-24"></i><i class="step fi-alert size-36"></i><i class="step fi-alert size-48"></i><i class="step fi-alert size-60"></i><i class="step fi-alert size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-alert" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-align-center size-12"></i><i class="step fi-align-center size-14"></i><i class="step fi-align-center size-16"></i><i class="step fi-align-center size-18"></i><i class="step fi-align-center size-21"></i><i class="step fi-align-center size-24"></i><i class="step fi-align-center size-36"></i><i class="step fi-align-center size-48"></i><i class="step fi-align-center size-60"></i><i class="step fi-align-center size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-align-center" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-align-justify size-12"></i><i class="step fi-align-justify size-14"></i><i class="step fi-align-justify size-16"></i><i class="step fi-align-justify size-18"></i><i class="step fi-align-justify size-21"></i><i class="step fi-align-justify size-24"></i><i class="step fi-align-justify size-36"></i><i class="step fi-align-justify size-48"></i><i class="step fi-align-justify size-60"></i><i class="step fi-align-justify size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-align-justify" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-align-left size-12"></i><i class="step fi-align-left size-14"></i><i class="step fi-align-left size-16"></i><i class="step fi-align-left size-18"></i><i class="step fi-align-left size-21"></i><i class="step fi-align-left size-24"></i><i class="step fi-align-left size-36"></i><i class="step fi-align-left size-48"></i><i class="step fi-align-left size-60"></i><i class="step fi-align-left size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-align-left" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-align-right size-12"></i><i class="step fi-align-right size-14"></i><i class="step fi-align-right size-16"></i><i class="step fi-align-right size-18"></i><i class="step fi-align-right size-21"></i><i class="step fi-align-right size-24"></i><i class="step fi-align-right size-36"></i><i class="step fi-align-right size-48"></i><i class="step fi-align-right size-60"></i><i class="step fi-align-right size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-align-right" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-anchor size-12"></i><i class="step fi-anchor size-14"></i><i class="step fi-anchor size-16"></i><i class="step fi-anchor size-18"></i><i class="step fi-anchor size-21"></i><i class="step fi-anchor size-24"></i><i class="step fi-anchor size-36"></i><i class="step fi-anchor size-48"></i><i class="step fi-anchor size-60"></i><i class="step fi-anchor size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-anchor" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-annotate size-12"></i><i class="step fi-annotate size-14"></i><i class="step fi-annotate size-16"></i><i class="step fi-annotate size-18"></i><i class="step fi-annotate size-21"></i><i class="step fi-annotate size-24"></i><i class="step fi-annotate size-36"></i><i class="step fi-annotate size-48"></i><i class="step fi-annotate size-60"></i><i class="step fi-annotate size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-annotate" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-archive size-12"></i><i class="step fi-archive size-14"></i><i class="step fi-archive size-16"></i><i class="step fi-archive size-18"></i><i class="step fi-archive size-21"></i><i class="step fi-archive size-24"></i><i class="step fi-archive size-36"></i><i class="step fi-archive size-48"></i><i class="step fi-archive size-60"></i><i class="step fi-archive size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-archive" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrow-down size-12"></i><i class="step fi-arrow-down size-14"></i><i class="step fi-arrow-down size-16"></i><i class="step fi-arrow-down size-18"></i><i class="step fi-arrow-down size-21"></i><i class="step fi-arrow-down size-24"></i><i class="step fi-arrow-down size-36"></i><i class="step fi-arrow-down size-48"></i><i class="step fi-arrow-down size-60"></i><i class="step fi-arrow-down size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrow-down" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrow-left size-12"></i><i class="step fi-arrow-left size-14"></i><i class="step fi-arrow-left size-16"></i><i class="step fi-arrow-left size-18"></i><i class="step fi-arrow-left size-21"></i><i class="step fi-arrow-left size-24"></i><i class="step fi-arrow-left size-36"></i><i class="step fi-arrow-left size-48"></i><i class="step fi-arrow-left size-60"></i><i class="step fi-arrow-left size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrow-left" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrow-right size-12"></i><i class="step fi-arrow-right size-14"></i><i class="step fi-arrow-right size-16"></i><i class="step fi-arrow-right size-18"></i><i class="step fi-arrow-right size-21"></i><i class="step fi-arrow-right size-24"></i><i class="step fi-arrow-right size-36"></i><i class="step fi-arrow-right size-48"></i><i class="step fi-arrow-right size-60"></i><i class="step fi-arrow-right size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrow-right" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrow-up size-12"></i><i class="step fi-arrow-up size-14"></i><i class="step fi-arrow-up size-16"></i><i class="step fi-arrow-up size-18"></i><i class="step fi-arrow-up size-21"></i><i class="step fi-arrow-up size-24"></i><i class="step fi-arrow-up size-36"></i><i class="step fi-arrow-up size-48"></i><i class="step fi-arrow-up size-60"></i><i class="step fi-arrow-up size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrow-up" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrows-compress size-12"></i><i class="step fi-arrows-compress size-14"></i><i class="step fi-arrows-compress size-16"></i><i class="step fi-arrows-compress size-18"></i><i class="step fi-arrows-compress size-21"></i><i class="step fi-arrows-compress size-24"></i><i class="step fi-arrows-compress size-36"></i><i class="step fi-arrows-compress size-48"></i><i class="step fi-arrows-compress size-60"></i><i class="step fi-arrows-compress size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrows-compress" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrows-expand size-12"></i><i class="step fi-arrows-expand size-14"></i><i class="step fi-arrows-expand size-16"></i><i class="step fi-arrows-expand size-18"></i><i class="step fi-arrows-expand size-21"></i><i class="step fi-arrows-expand size-24"></i><i class="step fi-arrows-expand size-36"></i><i class="step fi-arrows-expand size-48"></i><i class="step fi-arrows-expand size-60"></i><i class="step fi-arrows-expand size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrows-expand" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrows-in size-12"></i><i class="step fi-arrows-in size-14"></i><i class="step fi-arrows-in size-16"></i><i class="step fi-arrows-in size-18"></i><i class="step fi-arrows-in size-21"></i><i class="step fi-arrows-in size-24"></i><i class="step fi-arrows-in size-36"></i><i class="step fi-arrows-in size-48"></i><i class="step fi-arrows-in size-60"></i><i class="step fi-arrows-in size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrows-in" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-arrows-out size-12"></i><i class="step fi-arrows-out size-14"></i><i class="step fi-arrows-out size-16"></i><i class="step fi-arrows-out size-18"></i><i class="step fi-arrows-out size-21"></i><i class="step fi-arrows-out size-24"></i><i class="step fi-arrows-out size-36"></i><i class="step fi-arrows-out size-48"></i><i class="step fi-arrows-out size-60"></i><i class="step fi-arrows-out size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-arrows-out" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-asl size-12"></i><i class="step fi-asl size-14"></i><i class="step fi-asl size-16"></i><i class="step fi-asl size-18"></i><i class="step fi-asl size-21"></i><i class="step fi-asl size-24"></i><i class="step fi-asl size-36"></i><i class="step fi-asl size-48"></i><i class="step fi-asl size-60"></i><i class="step fi-asl size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-asl" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-asterisk size-12"></i><i class="step fi-asterisk size-14"></i><i class="step fi-asterisk size-16"></i><i class="step fi-asterisk size-18"></i><i class="step fi-asterisk size-21"></i><i class="step fi-asterisk size-24"></i><i class="step fi-asterisk size-36"></i><i class="step fi-asterisk size-48"></i><i class="step fi-asterisk size-60"></i><i class="step fi-asterisk size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-asterisk" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-at-sign size-12"></i><i class="step fi-at-sign size-14"></i><i class="step fi-at-sign size-16"></i><i class="step fi-at-sign size-18"></i><i class="step fi-at-sign size-21"></i><i class="step fi-at-sign size-24"></i><i class="step fi-at-sign size-36"></i><i class="step fi-at-sign size-48"></i><i class="step fi-at-sign size-60"></i><i class="step fi-at-sign size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-at-sign" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-background-color size-12"></i><i class="step fi-background-color size-14"></i><i class="step fi-background-color size-16"></i><i class="step fi-background-color size-18"></i><i class="step fi-background-color size-21"></i><i class="step fi-background-color size-24"></i><i class="step fi-background-color size-36"></i><i class="step fi-background-color size-48"></i><i class="step fi-background-color size-60"></i><i class="step fi-background-color size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-background-color" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-battery-empty size-12"></i><i class="step fi-battery-empty size-14"></i><i class="step fi-battery-empty size-16"></i><i class="step fi-battery-empty size-18"></i><i class="step fi-battery-empty size-21"></i><i class="step fi-battery-empty size-24"></i><i class="step fi-battery-empty size-36"></i><i class="step fi-battery-empty size-48"></i><i class="step fi-battery-empty size-60"></i><i class="step fi-battery-empty size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-battery-empty" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-battery-full size-12"></i><i class="step fi-battery-full size-14"></i><i class="step fi-battery-full size-16"></i><i class="step fi-battery-full size-18"></i><i class="step fi-battery-full size-21"></i><i class="step fi-battery-full size-24"></i><i class="step fi-battery-full size-36"></i><i class="step fi-battery-full size-48"></i><i class="step fi-battery-full size-60"></i><i class="step fi-battery-full size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-battery-full" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-battery-half size-12"></i><i class="step fi-battery-half size-14"></i><i class="step fi-battery-half size-16"></i><i class="step fi-battery-half size-18"></i><i class="step fi-battery-half size-21"></i><i class="step fi-battery-half size-24"></i><i class="step fi-battery-half size-36"></i><i class="step fi-battery-half size-48"></i><i class="step fi-battery-half size-60"></i><i class="step fi-battery-half size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-battery-half" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-bitcoin-circle size-12"></i><i class="step fi-bitcoin-circle size-14"></i><i class="step fi-bitcoin-circle size-16"></i><i class="step fi-bitcoin-circle size-18"></i><i class="step fi-bitcoin-circle size-21"></i><i class="step fi-bitcoin-circle size-24"></i><i class="step fi-bitcoin-circle size-36"></i><i class="step fi-bitcoin-circle size-48"></i><i class="step fi-bitcoin-circle size-60"></i><i class="step fi-bitcoin-circle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-bitcoin-circle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-bitcoin size-12"></i><i class="step fi-bitcoin size-14"></i><i class="step fi-bitcoin size-16"></i><i class="step fi-bitcoin size-18"></i><i class="step fi-bitcoin size-21"></i><i class="step fi-bitcoin size-24"></i><i class="step fi-bitcoin size-36"></i><i class="step fi-bitcoin size-48"></i><i class="step fi-bitcoin size-60"></i><i class="step fi-bitcoin size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-bitcoin" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-blind size-12"></i><i class="step fi-blind size-14"></i><i class="step fi-blind size-16"></i><i class="step fi-blind size-18"></i><i class="step fi-blind size-21"></i><i class="step fi-blind size-24"></i><i class="step fi-blind size-36"></i><i class="step fi-blind size-48"></i><i class="step fi-blind size-60"></i><i class="step fi-blind size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-blind" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-bluetooth size-12"></i><i class="step fi-bluetooth size-14"></i><i class="step fi-bluetooth size-16"></i><i class="step fi-bluetooth size-18"></i><i class="step fi-bluetooth size-21"></i><i class="step fi-bluetooth size-24"></i><i class="step fi-bluetooth size-36"></i><i class="step fi-bluetooth size-48"></i><i class="step fi-bluetooth size-60"></i><i class="step fi-bluetooth size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-bluetooth" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-bold size-12"></i><i class="step fi-bold size-14"></i><i class="step fi-bold size-16"></i><i class="step fi-bold size-18"></i><i class="step fi-bold size-21"></i><i class="step fi-bold size-24"></i><i class="step fi-bold size-36"></i><i class="step fi-bold size-48"></i><i class="step fi-bold size-60"></i><i class="step fi-bold size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-bold" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-book-bookmark size-12"></i><i class="step fi-book-bookmark size-14"></i><i class="step fi-book-bookmark size-16"></i><i class="step fi-book-bookmark size-18"></i><i class="step fi-book-bookmark size-21"></i><i class="step fi-book-bookmark size-24"></i><i class="step fi-book-bookmark size-36"></i><i class="step fi-book-bookmark size-48"></i><i class="step fi-book-bookmark size-60"></i><i class="step fi-book-bookmark size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-book-bookmark" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-book size-12"></i><i class="step fi-book size-14"></i><i class="step fi-book size-16"></i><i class="step fi-book size-18"></i><i class="step fi-book size-21"></i><i class="step fi-book size-24"></i><i class="step fi-book size-36"></i><i class="step fi-book size-48"></i><i class="step fi-book size-60"></i><i class="step fi-book size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-book" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-bookmark size-12"></i><i class="step fi-bookmark size-14"></i><i class="step fi-bookmark size-16"></i><i class="step fi-bookmark size-18"></i><i class="step fi-bookmark size-21"></i><i class="step fi-bookmark size-24"></i><i class="step fi-bookmark size-36"></i><i class="step fi-bookmark size-48"></i><i class="step fi-bookmark size-60"></i><i class="step fi-bookmark size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-bookmark" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-braille size-12"></i><i class="step fi-braille size-14"></i><i class="step fi-braille size-16"></i><i class="step fi-braille size-18"></i><i class="step fi-braille size-21"></i><i class="step fi-braille size-24"></i><i class="step fi-braille size-36"></i><i class="step fi-braille size-48"></i><i class="step fi-braille size-60"></i><i class="step fi-braille size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-braille" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-burst-new size-12"></i><i class="step fi-burst-new size-14"></i><i class="step fi-burst-new size-16"></i><i class="step fi-burst-new size-18"></i><i class="step fi-burst-new size-21"></i><i class="step fi-burst-new size-24"></i><i class="step fi-burst-new size-36"></i><i class="step fi-burst-new size-48"></i><i class="step fi-burst-new size-60"></i><i class="step fi-burst-new size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-burst-new" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-burst-sale size-12"></i><i class="step fi-burst-sale size-14"></i><i class="step fi-burst-sale size-16"></i><i class="step fi-burst-sale size-18"></i><i class="step fi-burst-sale size-21"></i><i class="step fi-burst-sale size-24"></i><i class="step fi-burst-sale size-36"></i><i class="step fi-burst-sale size-48"></i><i class="step fi-burst-sale size-60"></i><i class="step fi-burst-sale size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-burst-sale" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-burst size-12"></i><i class="step fi-burst size-14"></i><i class="step fi-burst size-16"></i><i class="step fi-burst size-18"></i><i class="step fi-burst size-21"></i><i class="step fi-burst size-24"></i><i class="step fi-burst size-36"></i><i class="step fi-burst size-48"></i><i class="step fi-burst size-60"></i><i class="step fi-burst size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-burst" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-calendar size-12"></i><i class="step fi-calendar size-14"></i><i class="step fi-calendar size-16"></i><i class="step fi-calendar size-18"></i><i class="step fi-calendar size-21"></i><i class="step fi-calendar size-24"></i><i class="step fi-calendar size-36"></i><i class="step fi-calendar size-48"></i><i class="step fi-calendar size-60"></i><i class="step fi-calendar size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-calendar" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-camera size-12"></i><i class="step fi-camera size-14"></i><i class="step fi-camera size-16"></i><i class="step fi-camera size-18"></i><i class="step fi-camera size-21"></i><i class="step fi-camera size-24"></i><i class="step fi-camera size-36"></i><i class="step fi-camera size-48"></i><i class="step fi-camera size-60"></i><i class="step fi-camera size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-camera" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-check size-12"></i><i class="step fi-check size-14"></i><i class="step fi-check size-16"></i><i class="step fi-check size-18"></i><i class="step fi-check size-21"></i><i class="step fi-check size-24"></i><i class="step fi-check size-36"></i><i class="step fi-check size-48"></i><i class="step fi-check size-60"></i><i class="step fi-check size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-check" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-checkbox size-12"></i><i class="step fi-checkbox size-14"></i><i class="step fi-checkbox size-16"></i><i class="step fi-checkbox size-18"></i><i class="step fi-checkbox size-21"></i><i class="step fi-checkbox size-24"></i><i class="step fi-checkbox size-36"></i><i class="step fi-checkbox size-48"></i><i class="step fi-checkbox size-60"></i><i class="step fi-checkbox size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-checkbox" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-clipboard-notes size-12"></i><i class="step fi-clipboard-notes size-14"></i><i class="step fi-clipboard-notes size-16"></i><i class="step fi-clipboard-notes size-18"></i><i class="step fi-clipboard-notes size-21"></i><i class="step fi-clipboard-notes size-24"></i><i class="step fi-clipboard-notes size-36"></i><i class="step fi-clipboard-notes size-48"></i><i class="step fi-clipboard-notes size-60"></i><i class="step fi-clipboard-notes size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-clipboard-notes" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-clipboard-pencil size-12"></i><i class="step fi-clipboard-pencil size-14"></i><i class="step fi-clipboard-pencil size-16"></i><i class="step fi-clipboard-pencil size-18"></i><i class="step fi-clipboard-pencil size-21"></i><i class="step fi-clipboard-pencil size-24"></i><i class="step fi-clipboard-pencil size-36"></i><i class="step fi-clipboard-pencil size-48"></i><i class="step fi-clipboard-pencil size-60"></i><i class="step fi-clipboard-pencil size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-clipboard-pencil" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-clipboard size-12"></i><i class="step fi-clipboard size-14"></i><i class="step fi-clipboard size-16"></i><i class="step fi-clipboard size-18"></i><i class="step fi-clipboard size-21"></i><i class="step fi-clipboard size-24"></i><i class="step fi-clipboard size-36"></i><i class="step fi-clipboard size-48"></i><i class="step fi-clipboard size-60"></i><i class="step fi-clipboard size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-clipboard" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-clock size-12"></i><i class="step fi-clock size-14"></i><i class="step fi-clock size-16"></i><i class="step fi-clock size-18"></i><i class="step fi-clock size-21"></i><i class="step fi-clock size-24"></i><i class="step fi-clock size-36"></i><i class="step fi-clock size-48"></i><i class="step fi-clock size-60"></i><i class="step fi-clock size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-clock" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-closed-caption size-12"></i><i class="step fi-closed-caption size-14"></i><i class="step fi-closed-caption size-16"></i><i class="step fi-closed-caption size-18"></i><i class="step fi-closed-caption size-21"></i><i class="step fi-closed-caption size-24"></i><i class="step fi-closed-caption size-36"></i><i class="step fi-closed-caption size-48"></i><i class="step fi-closed-caption size-60"></i><i class="step fi-closed-caption size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-closed-caption" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-cloud size-12"></i><i class="step fi-cloud size-14"></i><i class="step fi-cloud size-16"></i><i class="step fi-cloud size-18"></i><i class="step fi-cloud size-21"></i><i class="step fi-cloud size-24"></i><i class="step fi-cloud size-36"></i><i class="step fi-cloud size-48"></i><i class="step fi-cloud size-60"></i><i class="step fi-cloud size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-cloud" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-comment-minus size-12"></i><i class="step fi-comment-minus size-14"></i><i class="step fi-comment-minus size-16"></i><i class="step fi-comment-minus size-18"></i><i class="step fi-comment-minus size-21"></i><i class="step fi-comment-minus size-24"></i><i class="step fi-comment-minus size-36"></i><i class="step fi-comment-minus size-48"></i><i class="step fi-comment-minus size-60"></i><i class="step fi-comment-minus size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-comment-minus" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-comment-quotes size-12"></i><i class="step fi-comment-quotes size-14"></i><i class="step fi-comment-quotes size-16"></i><i class="step fi-comment-quotes size-18"></i><i class="step fi-comment-quotes size-21"></i><i class="step fi-comment-quotes size-24"></i><i class="step fi-comment-quotes size-36"></i><i class="step fi-comment-quotes size-48"></i><i class="step fi-comment-quotes size-60"></i><i class="step fi-comment-quotes size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-comment-quotes" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-comment-video size-12"></i><i class="step fi-comment-video size-14"></i><i class="step fi-comment-video size-16"></i><i class="step fi-comment-video size-18"></i><i class="step fi-comment-video size-21"></i><i class="step fi-comment-video size-24"></i><i class="step fi-comment-video size-36"></i><i class="step fi-comment-video size-48"></i><i class="step fi-comment-video size-60"></i><i class="step fi-comment-video size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-comment-video" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-comment size-12"></i><i class="step fi-comment size-14"></i><i class="step fi-comment size-16"></i><i class="step fi-comment size-18"></i><i class="step fi-comment size-21"></i><i class="step fi-comment size-24"></i><i class="step fi-comment size-36"></i><i class="step fi-comment size-48"></i><i class="step fi-comment size-60"></i><i class="step fi-comment size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-comment" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-comments size-12"></i><i class="step fi-comments size-14"></i><i class="step fi-comments size-16"></i><i class="step fi-comments size-18"></i><i class="step fi-comments size-21"></i><i class="step fi-comments size-24"></i><i class="step fi-comments size-36"></i><i class="step fi-comments size-48"></i><i class="step fi-comments size-60"></i><i class="step fi-comments size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-comments" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf132;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-compass size-12"></i><i class="step fi-compass size-14"></i><i class="step fi-compass size-16"></i><i class="step fi-compass size-18"></i><i class="step fi-compass size-21"></i><i class="step fi-compass size-24"></i><i class="step fi-compass size-36"></i><i class="step fi-compass size-48"></i><i class="step fi-compass size-60"></i><i class="step fi-compass size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-compass" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-contrast size-12"></i><i class="step fi-contrast size-14"></i><i class="step fi-contrast size-16"></i><i class="step fi-contrast size-18"></i><i class="step fi-contrast size-21"></i><i class="step fi-contrast size-24"></i><i class="step fi-contrast size-36"></i><i class="step fi-contrast size-48"></i><i class="step fi-contrast size-60"></i><i class="step fi-contrast size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-contrast" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf134;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-credit-card size-12"></i><i class="step fi-credit-card size-14"></i><i class="step fi-credit-card size-16"></i><i class="step fi-credit-card size-18"></i><i class="step fi-credit-card size-21"></i><i class="step fi-credit-card size-24"></i><i class="step fi-credit-card size-36"></i><i class="step fi-credit-card size-48"></i><i class="step fi-credit-card size-60"></i><i class="step fi-credit-card size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-credit-card" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf135;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-crop size-12"></i><i class="step fi-crop size-14"></i><i class="step fi-crop size-16"></i><i class="step fi-crop size-18"></i><i class="step fi-crop size-21"></i><i class="step fi-crop size-24"></i><i class="step fi-crop size-36"></i><i class="step fi-crop size-48"></i><i class="step fi-crop size-60"></i><i class="step fi-crop size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-crop" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf136;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-crown size-12"></i><i class="step fi-crown size-14"></i><i class="step fi-crown size-16"></i><i class="step fi-crown size-18"></i><i class="step fi-crown size-21"></i><i class="step fi-crown size-24"></i><i class="step fi-crown size-36"></i><i class="step fi-crown size-48"></i><i class="step fi-crown size-60"></i><i class="step fi-crown size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-crown" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf137;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-css3 size-12"></i><i class="step fi-css3 size-14"></i><i class="step fi-css3 size-16"></i><i class="step fi-css3 size-18"></i><i class="step fi-css3 size-21"></i><i class="step fi-css3 size-24"></i><i class="step fi-css3 size-36"></i><i class="step fi-css3 size-48"></i><i class="step fi-css3 size-60"></i><i class="step fi-css3 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-css3" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf138;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-database size-12"></i><i class="step fi-database size-14"></i><i class="step fi-database size-16"></i><i class="step fi-database size-18"></i><i class="step fi-database size-21"></i><i class="step fi-database size-24"></i><i class="step fi-database size-36"></i><i class="step fi-database size-48"></i><i class="step fi-database size-60"></i><i class="step fi-database size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-database" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf139;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-die-five size-12"></i><i class="step fi-die-five size-14"></i><i class="step fi-die-five size-16"></i><i class="step fi-die-five size-18"></i><i class="step fi-die-five size-21"></i><i class="step fi-die-five size-24"></i><i class="step fi-die-five size-36"></i><i class="step fi-die-five size-48"></i><i class="step fi-die-five size-60"></i><i class="step fi-die-five size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-die-five" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-die-four size-12"></i><i class="step fi-die-four size-14"></i><i class="step fi-die-four size-16"></i><i class="step fi-die-four size-18"></i><i class="step fi-die-four size-21"></i><i class="step fi-die-four size-24"></i><i class="step fi-die-four size-36"></i><i class="step fi-die-four size-48"></i><i class="step fi-die-four size-60"></i><i class="step fi-die-four size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-die-four" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-die-one size-12"></i><i class="step fi-die-one size-14"></i><i class="step fi-die-one size-16"></i><i class="step fi-die-one size-18"></i><i class="step fi-die-one size-21"></i><i class="step fi-die-one size-24"></i><i class="step fi-die-one size-36"></i><i class="step fi-die-one size-48"></i><i class="step fi-die-one size-60"></i><i class="step fi-die-one size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-die-one" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-die-six size-12"></i><i class="step fi-die-six size-14"></i><i class="step fi-die-six size-16"></i><i class="step fi-die-six size-18"></i><i class="step fi-die-six size-21"></i><i class="step fi-die-six size-24"></i><i class="step fi-die-six size-36"></i><i class="step fi-die-six size-48"></i><i class="step fi-die-six size-60"></i><i class="step fi-die-six size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-die-six" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-die-three size-12"></i><i class="step fi-die-three size-14"></i><i class="step fi-die-three size-16"></i><i class="step fi-die-three size-18"></i><i class="step fi-die-three size-21"></i><i class="step fi-die-three size-24"></i><i class="step fi-die-three size-36"></i><i class="step fi-die-three size-48"></i><i class="step fi-die-three size-60"></i><i class="step fi-die-three size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-die-three" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-die-two size-12"></i><i class="step fi-die-two size-14"></i><i class="step fi-die-two size-16"></i><i class="step fi-die-two size-18"></i><i class="step fi-die-two size-21"></i><i class="step fi-die-two size-24"></i><i class="step fi-die-two size-36"></i><i class="step fi-die-two size-48"></i><i class="step fi-die-two size-60"></i><i class="step fi-die-two size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-die-two" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-dislike size-12"></i><i class="step fi-dislike size-14"></i><i class="step fi-dislike size-16"></i><i class="step fi-dislike size-18"></i><i class="step fi-dislike size-21"></i><i class="step fi-dislike size-24"></i><i class="step fi-dislike size-36"></i><i class="step fi-dislike size-48"></i><i class="step fi-dislike size-60"></i><i class="step fi-dislike size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-dislike" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf140;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-dollar-bill size-12"></i><i class="step fi-dollar-bill size-14"></i><i class="step fi-dollar-bill size-16"></i><i class="step fi-dollar-bill size-18"></i><i class="step fi-dollar-bill size-21"></i><i class="step fi-dollar-bill size-24"></i><i class="step fi-dollar-bill size-36"></i><i class="step fi-dollar-bill size-48"></i><i class="step fi-dollar-bill size-60"></i><i class="step fi-dollar-bill size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-dollar-bill" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf141;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-dollar size-12"></i><i class="step fi-dollar size-14"></i><i class="step fi-dollar size-16"></i><i class="step fi-dollar size-18"></i><i class="step fi-dollar size-21"></i><i class="step fi-dollar size-24"></i><i class="step fi-dollar size-36"></i><i class="step fi-dollar size-48"></i><i class="step fi-dollar size-60"></i><i class="step fi-dollar size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-dollar" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf142;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-download size-12"></i><i class="step fi-download size-14"></i><i class="step fi-download size-16"></i><i class="step fi-download size-18"></i><i class="step fi-download size-21"></i><i class="step fi-download size-24"></i><i class="step fi-download size-36"></i><i class="step fi-download size-48"></i><i class="step fi-download size-60"></i><i class="step fi-download size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-download" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf143;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-eject size-12"></i><i class="step fi-eject size-14"></i><i class="step fi-eject size-16"></i><i class="step fi-eject size-18"></i><i class="step fi-eject size-21"></i><i class="step fi-eject size-24"></i><i class="step fi-eject size-36"></i><i class="step fi-eject size-48"></i><i class="step fi-eject size-60"></i><i class="step fi-eject size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-eject" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf144;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-elevator size-12"></i><i class="step fi-elevator size-14"></i><i class="step fi-elevator size-16"></i><i class="step fi-elevator size-18"></i><i class="step fi-elevator size-21"></i><i class="step fi-elevator size-24"></i><i class="step fi-elevator size-36"></i><i class="step fi-elevator size-48"></i><i class="step fi-elevator size-60"></i><i class="step fi-elevator size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-elevator" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf145;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-euro size-12"></i><i class="step fi-euro size-14"></i><i class="step fi-euro size-16"></i><i class="step fi-euro size-18"></i><i class="step fi-euro size-21"></i><i class="step fi-euro size-24"></i><i class="step fi-euro size-36"></i><i class="step fi-euro size-48"></i><i class="step fi-euro size-60"></i><i class="step fi-euro size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-euro" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf146;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-eye size-12"></i><i class="step fi-eye size-14"></i><i class="step fi-eye size-16"></i><i class="step fi-eye size-18"></i><i class="step fi-eye size-21"></i><i class="step fi-eye size-24"></i><i class="step fi-eye size-36"></i><i class="step fi-eye size-48"></i><i class="step fi-eye size-60"></i><i class="step fi-eye size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-eye" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf147;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-fast-forward size-12"></i><i class="step fi-fast-forward size-14"></i><i class="step fi-fast-forward size-16"></i><i class="step fi-fast-forward size-18"></i><i class="step fi-fast-forward size-21"></i><i class="step fi-fast-forward size-24"></i><i class="step fi-fast-forward size-36"></i><i class="step fi-fast-forward size-48"></i><i class="step fi-fast-forward size-60"></i><i class="step fi-fast-forward size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-fast-forward" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf148;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-female-symbol size-12"></i><i class="step fi-female-symbol size-14"></i><i class="step fi-female-symbol size-16"></i><i class="step fi-female-symbol size-18"></i><i class="step fi-female-symbol size-21"></i><i class="step fi-female-symbol size-24"></i><i class="step fi-female-symbol size-36"></i><i class="step fi-female-symbol size-48"></i><i class="step fi-female-symbol size-60"></i><i class="step fi-female-symbol size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-female-symbol" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf149;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-female size-12"></i><i class="step fi-female size-14"></i><i class="step fi-female size-16"></i><i class="step fi-female size-18"></i><i class="step fi-female size-21"></i><i class="step fi-female size-24"></i><i class="step fi-female size-36"></i><i class="step fi-female size-48"></i><i class="step fi-female size-60"></i><i class="step fi-female size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-female" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-filter size-12"></i><i class="step fi-filter size-14"></i><i class="step fi-filter size-16"></i><i class="step fi-filter size-18"></i><i class="step fi-filter size-21"></i><i class="step fi-filter size-24"></i><i class="step fi-filter size-36"></i><i class="step fi-filter size-48"></i><i class="step fi-filter size-60"></i><i class="step fi-filter size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-filter" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-first-aid size-12"></i><i class="step fi-first-aid size-14"></i><i class="step fi-first-aid size-16"></i><i class="step fi-first-aid size-18"></i><i class="step fi-first-aid size-21"></i><i class="step fi-first-aid size-24"></i><i class="step fi-first-aid size-36"></i><i class="step fi-first-aid size-48"></i><i class="step fi-first-aid size-60"></i><i class="step fi-first-aid size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-first-aid" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-flag size-12"></i><i class="step fi-flag size-14"></i><i class="step fi-flag size-16"></i><i class="step fi-flag size-18"></i><i class="step fi-flag size-21"></i><i class="step fi-flag size-24"></i><i class="step fi-flag size-36"></i><i class="step fi-flag size-48"></i><i class="step fi-flag size-60"></i><i class="step fi-flag size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-flag" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-folder-add size-12"></i><i class="step fi-folder-add size-14"></i><i class="step fi-folder-add size-16"></i><i class="step fi-folder-add size-18"></i><i class="step fi-folder-add size-21"></i><i class="step fi-folder-add size-24"></i><i class="step fi-folder-add size-36"></i><i class="step fi-folder-add size-48"></i><i class="step fi-folder-add size-60"></i><i class="step fi-folder-add size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-folder-add" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-folder-lock size-12"></i><i class="step fi-folder-lock size-14"></i><i class="step fi-folder-lock size-16"></i><i class="step fi-folder-lock size-18"></i><i class="step fi-folder-lock size-21"></i><i class="step fi-folder-lock size-24"></i><i class="step fi-folder-lock size-36"></i><i class="step fi-folder-lock size-48"></i><i class="step fi-folder-lock size-60"></i><i class="step fi-folder-lock size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-folder-lock" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-folder size-12"></i><i class="step fi-folder size-14"></i><i class="step fi-folder size-16"></i><i class="step fi-folder size-18"></i><i class="step fi-folder size-21"></i><i class="step fi-folder size-24"></i><i class="step fi-folder size-36"></i><i class="step fi-folder size-48"></i><i class="step fi-folder size-60"></i><i class="step fi-folder size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-folder" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf150;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-foot size-12"></i><i class="step fi-foot size-14"></i><i class="step fi-foot size-16"></i><i class="step fi-foot size-18"></i><i class="step fi-foot size-21"></i><i class="step fi-foot size-24"></i><i class="step fi-foot size-36"></i><i class="step fi-foot size-48"></i><i class="step fi-foot size-60"></i><i class="step fi-foot size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-foot" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf151;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-foundation size-12"></i><i class="step fi-foundation size-14"></i><i class="step fi-foundation size-16"></i><i class="step fi-foundation size-18"></i><i class="step fi-foundation size-21"></i><i class="step fi-foundation size-24"></i><i class="step fi-foundation size-36"></i><i class="step fi-foundation size-48"></i><i class="step fi-foundation size-60"></i><i class="step fi-foundation size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-foundation" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf152;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-graph-bar size-12"></i><i class="step fi-graph-bar size-14"></i><i class="step fi-graph-bar size-16"></i><i class="step fi-graph-bar size-18"></i><i class="step fi-graph-bar size-21"></i><i class="step fi-graph-bar size-24"></i><i class="step fi-graph-bar size-36"></i><i class="step fi-graph-bar size-48"></i><i class="step fi-graph-bar size-60"></i><i class="step fi-graph-bar size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-graph-bar" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf153;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-graph-horizontal size-12"></i><i class="step fi-graph-horizontal size-14"></i><i class="step fi-graph-horizontal size-16"></i><i class="step fi-graph-horizontal size-18"></i><i class="step fi-graph-horizontal size-21"></i><i class="step fi-graph-horizontal size-24"></i><i class="step fi-graph-horizontal size-36"></i><i class="step fi-graph-horizontal size-48"></i><i class="step fi-graph-horizontal size-60"></i><i class="step fi-graph-horizontal size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-graph-horizontal" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf154;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-graph-pie size-12"></i><i class="step fi-graph-pie size-14"></i><i class="step fi-graph-pie size-16"></i><i class="step fi-graph-pie size-18"></i><i class="step fi-graph-pie size-21"></i><i class="step fi-graph-pie size-24"></i><i class="step fi-graph-pie size-36"></i><i class="step fi-graph-pie size-48"></i><i class="step fi-graph-pie size-60"></i><i class="step fi-graph-pie size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-graph-pie" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf155;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-graph-trend size-12"></i><i class="step fi-graph-trend size-14"></i><i class="step fi-graph-trend size-16"></i><i class="step fi-graph-trend size-18"></i><i class="step fi-graph-trend size-21"></i><i class="step fi-graph-trend size-24"></i><i class="step fi-graph-trend size-36"></i><i class="step fi-graph-trend size-48"></i><i class="step fi-graph-trend size-60"></i><i class="step fi-graph-trend size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-graph-trend" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf156;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-guide-dog size-12"></i><i class="step fi-guide-dog size-14"></i><i class="step fi-guide-dog size-16"></i><i class="step fi-guide-dog size-18"></i><i class="step fi-guide-dog size-21"></i><i class="step fi-guide-dog size-24"></i><i class="step fi-guide-dog size-36"></i><i class="step fi-guide-dog size-48"></i><i class="step fi-guide-dog size-60"></i><i class="step fi-guide-dog size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-guide-dog" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf157;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-hearing-aid size-12"></i><i class="step fi-hearing-aid size-14"></i><i class="step fi-hearing-aid size-16"></i><i class="step fi-hearing-aid size-18"></i><i class="step fi-hearing-aid size-21"></i><i class="step fi-hearing-aid size-24"></i><i class="step fi-hearing-aid size-36"></i><i class="step fi-hearing-aid size-48"></i><i class="step fi-hearing-aid size-60"></i><i class="step fi-hearing-aid size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-hearing-aid" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf158;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-heart size-12"></i><i class="step fi-heart size-14"></i><i class="step fi-heart size-16"></i><i class="step fi-heart size-18"></i><i class="step fi-heart size-21"></i><i class="step fi-heart size-24"></i><i class="step fi-heart size-36"></i><i class="step fi-heart size-48"></i><i class="step fi-heart size-60"></i><i class="step fi-heart size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-heart" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf159;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-home size-12"></i><i class="step fi-home size-14"></i><i class="step fi-home size-16"></i><i class="step fi-home size-18"></i><i class="step fi-home size-21"></i><i class="step fi-home size-24"></i><i class="step fi-home size-36"></i><i class="step fi-home size-48"></i><i class="step fi-home size-60"></i><i class="step fi-home size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-home" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-html5 size-12"></i><i class="step fi-html5 size-14"></i><i class="step fi-html5 size-16"></i><i class="step fi-html5 size-18"></i><i class="step fi-html5 size-21"></i><i class="step fi-html5 size-24"></i><i class="step fi-html5 size-36"></i><i class="step fi-html5 size-48"></i><i class="step fi-html5 size-60"></i><i class="step fi-html5 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-html5" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-indent-less size-12"></i><i class="step fi-indent-less size-14"></i><i class="step fi-indent-less size-16"></i><i class="step fi-indent-less size-18"></i><i class="step fi-indent-less size-21"></i><i class="step fi-indent-less size-24"></i><i class="step fi-indent-less size-36"></i><i class="step fi-indent-less size-48"></i><i class="step fi-indent-less size-60"></i><i class="step fi-indent-less size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-indent-less" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-indent-more size-12"></i><i class="step fi-indent-more size-14"></i><i class="step fi-indent-more size-16"></i><i class="step fi-indent-more size-18"></i><i class="step fi-indent-more size-21"></i><i class="step fi-indent-more size-24"></i><i class="step fi-indent-more size-36"></i><i class="step fi-indent-more size-48"></i><i class="step fi-indent-more size-60"></i><i class="step fi-indent-more size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-indent-more" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-info size-12"></i><i class="step fi-info size-14"></i><i class="step fi-info size-16"></i><i class="step fi-info size-18"></i><i class="step fi-info size-21"></i><i class="step fi-info size-24"></i><i class="step fi-info size-36"></i><i class="step fi-info size-48"></i><i class="step fi-info size-60"></i><i class="step fi-info size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-info" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-italic size-12"></i><i class="step fi-italic size-14"></i><i class="step fi-italic size-16"></i><i class="step fi-italic size-18"></i><i class="step fi-italic size-21"></i><i class="step fi-italic size-24"></i><i class="step fi-italic size-36"></i><i class="step fi-italic size-48"></i><i class="step fi-italic size-60"></i><i class="step fi-italic size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-italic" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-key size-12"></i><i class="step fi-key size-14"></i><i class="step fi-key size-16"></i><i class="step fi-key size-18"></i><i class="step fi-key size-21"></i><i class="step fi-key size-24"></i><i class="step fi-key size-36"></i><i class="step fi-key size-48"></i><i class="step fi-key size-60"></i><i class="step fi-key size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-key" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf160;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-laptop size-12"></i><i class="step fi-laptop size-14"></i><i class="step fi-laptop size-16"></i><i class="step fi-laptop size-18"></i><i class="step fi-laptop size-21"></i><i class="step fi-laptop size-24"></i><i class="step fi-laptop size-36"></i><i class="step fi-laptop size-48"></i><i class="step fi-laptop size-60"></i><i class="step fi-laptop size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-laptop" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf161;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-layout size-12"></i><i class="step fi-layout size-14"></i><i class="step fi-layout size-16"></i><i class="step fi-layout size-18"></i><i class="step fi-layout size-21"></i><i class="step fi-layout size-24"></i><i class="step fi-layout size-36"></i><i class="step fi-layout size-48"></i><i class="step fi-layout size-60"></i><i class="step fi-layout size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-layout" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf162;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-lightbulb size-12"></i><i class="step fi-lightbulb size-14"></i><i class="step fi-lightbulb size-16"></i><i class="step fi-lightbulb size-18"></i><i class="step fi-lightbulb size-21"></i><i class="step fi-lightbulb size-24"></i><i class="step fi-lightbulb size-36"></i><i class="step fi-lightbulb size-48"></i><i class="step fi-lightbulb size-60"></i><i class="step fi-lightbulb size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-lightbulb" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf163;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-like size-12"></i><i class="step fi-like size-14"></i><i class="step fi-like size-16"></i><i class="step fi-like size-18"></i><i class="step fi-like size-21"></i><i class="step fi-like size-24"></i><i class="step fi-like size-36"></i><i class="step fi-like size-48"></i><i class="step fi-like size-60"></i><i class="step fi-like size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-like" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf164;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-link size-12"></i><i class="step fi-link size-14"></i><i class="step fi-link size-16"></i><i class="step fi-link size-18"></i><i class="step fi-link size-21"></i><i class="step fi-link size-24"></i><i class="step fi-link size-36"></i><i class="step fi-link size-48"></i><i class="step fi-link size-60"></i><i class="step fi-link size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-link" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf165;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-list-bullet size-12"></i><i class="step fi-list-bullet size-14"></i><i class="step fi-list-bullet size-16"></i><i class="step fi-list-bullet size-18"></i><i class="step fi-list-bullet size-21"></i><i class="step fi-list-bullet size-24"></i><i class="step fi-list-bullet size-36"></i><i class="step fi-list-bullet size-48"></i><i class="step fi-list-bullet size-60"></i><i class="step fi-list-bullet size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-list-bullet" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf166;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-list-number size-12"></i><i class="step fi-list-number size-14"></i><i class="step fi-list-number size-16"></i><i class="step fi-list-number size-18"></i><i class="step fi-list-number size-21"></i><i class="step fi-list-number size-24"></i><i class="step fi-list-number size-36"></i><i class="step fi-list-number size-48"></i><i class="step fi-list-number size-60"></i><i class="step fi-list-number size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-list-number" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf167;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-list-thumbnails size-12"></i><i class="step fi-list-thumbnails size-14"></i><i class="step fi-list-thumbnails size-16"></i><i class="step fi-list-thumbnails size-18"></i><i class="step fi-list-thumbnails size-21"></i><i class="step fi-list-thumbnails size-24"></i><i class="step fi-list-thumbnails size-36"></i><i class="step fi-list-thumbnails size-48"></i><i class="step fi-list-thumbnails size-60"></i><i class="step fi-list-thumbnails size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-list-thumbnails" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf168;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-list size-12"></i><i class="step fi-list size-14"></i><i class="step fi-list size-16"></i><i class="step fi-list size-18"></i><i class="step fi-list size-21"></i><i class="step fi-list size-24"></i><i class="step fi-list size-36"></i><i class="step fi-list size-48"></i><i class="step fi-list size-60"></i><i class="step fi-list size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-list" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf169;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-lock size-12"></i><i class="step fi-lock size-14"></i><i class="step fi-lock size-16"></i><i class="step fi-lock size-18"></i><i class="step fi-lock size-21"></i><i class="step fi-lock size-24"></i><i class="step fi-lock size-36"></i><i class="step fi-lock size-48"></i><i class="step fi-lock size-60"></i><i class="step fi-lock size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-lock" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-loop size-12"></i><i class="step fi-loop size-14"></i><i class="step fi-loop size-16"></i><i class="step fi-loop size-18"></i><i class="step fi-loop size-21"></i><i class="step fi-loop size-24"></i><i class="step fi-loop size-36"></i><i class="step fi-loop size-48"></i><i class="step fi-loop size-60"></i><i class="step fi-loop size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-loop" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-magnifying-glass size-12"></i><i class="step fi-magnifying-glass size-14"></i><i class="step fi-magnifying-glass size-16"></i><i class="step fi-magnifying-glass size-18"></i><i class="step fi-magnifying-glass size-21"></i><i class="step fi-magnifying-glass size-24"></i><i class="step fi-magnifying-glass size-36"></i><i class="step fi-magnifying-glass size-48"></i><i class="step fi-magnifying-glass size-60"></i><i class="step fi-magnifying-glass size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-magnifying-glass" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-mail size-12"></i><i class="step fi-mail size-14"></i><i class="step fi-mail size-16"></i><i class="step fi-mail size-18"></i><i class="step fi-mail size-21"></i><i class="step fi-mail size-24"></i><i class="step fi-mail size-36"></i><i class="step fi-mail size-48"></i><i class="step fi-mail size-60"></i><i class="step fi-mail size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-mail" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-male-female size-12"></i><i class="step fi-male-female size-14"></i><i class="step fi-male-female size-16"></i><i class="step fi-male-female size-18"></i><i class="step fi-male-female size-21"></i><i class="step fi-male-female size-24"></i><i class="step fi-male-female size-36"></i><i class="step fi-male-female size-48"></i><i class="step fi-male-female size-60"></i><i class="step fi-male-female size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-male-female" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-male-symbol size-12"></i><i class="step fi-male-symbol size-14"></i><i class="step fi-male-symbol size-16"></i><i class="step fi-male-symbol size-18"></i><i class="step fi-male-symbol size-21"></i><i class="step fi-male-symbol size-24"></i><i class="step fi-male-symbol size-36"></i><i class="step fi-male-symbol size-48"></i><i class="step fi-male-symbol size-60"></i><i class="step fi-male-symbol size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-male-symbol" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-male size-12"></i><i class="step fi-male size-14"></i><i class="step fi-male size-16"></i><i class="step fi-male size-18"></i><i class="step fi-male size-21"></i><i class="step fi-male size-24"></i><i class="step fi-male size-36"></i><i class="step fi-male size-48"></i><i class="step fi-male size-60"></i><i class="step fi-male size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-male" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf170;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-map size-12"></i><i class="step fi-map size-14"></i><i class="step fi-map size-16"></i><i class="step fi-map size-18"></i><i class="step fi-map size-21"></i><i class="step fi-map size-24"></i><i class="step fi-map size-36"></i><i class="step fi-map size-48"></i><i class="step fi-map size-60"></i><i class="step fi-map size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-map" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf171;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-marker size-12"></i><i class="step fi-marker size-14"></i><i class="step fi-marker size-16"></i><i class="step fi-marker size-18"></i><i class="step fi-marker size-21"></i><i class="step fi-marker size-24"></i><i class="step fi-marker size-36"></i><i class="step fi-marker size-48"></i><i class="step fi-marker size-60"></i><i class="step fi-marker size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-marker" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf172;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-megaphone size-12"></i><i class="step fi-megaphone size-14"></i><i class="step fi-megaphone size-16"></i><i class="step fi-megaphone size-18"></i><i class="step fi-megaphone size-21"></i><i class="step fi-megaphone size-24"></i><i class="step fi-megaphone size-36"></i><i class="step fi-megaphone size-48"></i><i class="step fi-megaphone size-60"></i><i class="step fi-megaphone size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-megaphone" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf173;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-microphone size-12"></i><i class="step fi-microphone size-14"></i><i class="step fi-microphone size-16"></i><i class="step fi-microphone size-18"></i><i class="step fi-microphone size-21"></i><i class="step fi-microphone size-24"></i><i class="step fi-microphone size-36"></i><i class="step fi-microphone size-48"></i><i class="step fi-microphone size-60"></i><i class="step fi-microphone size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-microphone" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf174;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-minus-circle size-12"></i><i class="step fi-minus-circle size-14"></i><i class="step fi-minus-circle size-16"></i><i class="step fi-minus-circle size-18"></i><i class="step fi-minus-circle size-21"></i><i class="step fi-minus-circle size-24"></i><i class="step fi-minus-circle size-36"></i><i class="step fi-minus-circle size-48"></i><i class="step fi-minus-circle size-60"></i><i class="step fi-minus-circle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-minus-circle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf175;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-minus size-12"></i><i class="step fi-minus size-14"></i><i class="step fi-minus size-16"></i><i class="step fi-minus size-18"></i><i class="step fi-minus size-21"></i><i class="step fi-minus size-24"></i><i class="step fi-minus size-36"></i><i class="step fi-minus size-48"></i><i class="step fi-minus size-60"></i><i class="step fi-minus size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-minus" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf176;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-mobile-signal size-12"></i><i class="step fi-mobile-signal size-14"></i><i class="step fi-mobile-signal size-16"></i><i class="step fi-mobile-signal size-18"></i><i class="step fi-mobile-signal size-21"></i><i class="step fi-mobile-signal size-24"></i><i class="step fi-mobile-signal size-36"></i><i class="step fi-mobile-signal size-48"></i><i class="step fi-mobile-signal size-60"></i><i class="step fi-mobile-signal size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-mobile-signal" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf177;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-mobile size-12"></i><i class="step fi-mobile size-14"></i><i class="step fi-mobile size-16"></i><i class="step fi-mobile size-18"></i><i class="step fi-mobile size-21"></i><i class="step fi-mobile size-24"></i><i class="step fi-mobile size-36"></i><i class="step fi-mobile size-48"></i><i class="step fi-mobile size-60"></i><i class="step fi-mobile size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-mobile" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf178;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-monitor size-12"></i><i class="step fi-monitor size-14"></i><i class="step fi-monitor size-16"></i><i class="step fi-monitor size-18"></i><i class="step fi-monitor size-21"></i><i class="step fi-monitor size-24"></i><i class="step fi-monitor size-36"></i><i class="step fi-monitor size-48"></i><i class="step fi-monitor size-60"></i><i class="step fi-monitor size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-monitor" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf179;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-mountains size-12"></i><i class="step fi-mountains size-14"></i><i class="step fi-mountains size-16"></i><i class="step fi-mountains size-18"></i><i class="step fi-mountains size-21"></i><i class="step fi-mountains size-24"></i><i class="step fi-mountains size-36"></i><i class="step fi-mountains size-48"></i><i class="step fi-mountains size-60"></i><i class="step fi-mountains size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-mountains" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-music size-12"></i><i class="step fi-music size-14"></i><i class="step fi-music size-16"></i><i class="step fi-music size-18"></i><i class="step fi-music size-21"></i><i class="step fi-music size-24"></i><i class="step fi-music size-36"></i><i class="step fi-music size-48"></i><i class="step fi-music size-60"></i><i class="step fi-music size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-music" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-next size-12"></i><i class="step fi-next size-14"></i><i class="step fi-next size-16"></i><i class="step fi-next size-18"></i><i class="step fi-next size-21"></i><i class="step fi-next size-24"></i><i class="step fi-next size-36"></i><i class="step fi-next size-48"></i><i class="step fi-next size-60"></i><i class="step fi-next size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-next" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-no-dogs size-12"></i><i class="step fi-no-dogs size-14"></i><i class="step fi-no-dogs size-16"></i><i class="step fi-no-dogs size-18"></i><i class="step fi-no-dogs size-21"></i><i class="step fi-no-dogs size-24"></i><i class="step fi-no-dogs size-36"></i><i class="step fi-no-dogs size-48"></i><i class="step fi-no-dogs size-60"></i><i class="step fi-no-dogs size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-no-dogs" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-no-smoking size-12"></i><i class="step fi-no-smoking size-14"></i><i class="step fi-no-smoking size-16"></i><i class="step fi-no-smoking size-18"></i><i class="step fi-no-smoking size-21"></i><i class="step fi-no-smoking size-24"></i><i class="step fi-no-smoking size-36"></i><i class="step fi-no-smoking size-48"></i><i class="step fi-no-smoking size-60"></i><i class="step fi-no-smoking size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-no-smoking" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-add size-12"></i><i class="step fi-page-add size-14"></i><i class="step fi-page-add size-16"></i><i class="step fi-page-add size-18"></i><i class="step fi-page-add size-21"></i><i class="step fi-page-add size-24"></i><i class="step fi-page-add size-36"></i><i class="step fi-page-add size-48"></i><i class="step fi-page-add size-60"></i><i class="step fi-page-add size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-add" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-copy size-12"></i><i class="step fi-page-copy size-14"></i><i class="step fi-page-copy size-16"></i><i class="step fi-page-copy size-18"></i><i class="step fi-page-copy size-21"></i><i class="step fi-page-copy size-24"></i><i class="step fi-page-copy size-36"></i><i class="step fi-page-copy size-48"></i><i class="step fi-page-copy size-60"></i><i class="step fi-page-copy size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-copy" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf180;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-csv size-12"></i><i class="step fi-page-csv size-14"></i><i class="step fi-page-csv size-16"></i><i class="step fi-page-csv size-18"></i><i class="step fi-page-csv size-21"></i><i class="step fi-page-csv size-24"></i><i class="step fi-page-csv size-36"></i><i class="step fi-page-csv size-48"></i><i class="step fi-page-csv size-60"></i><i class="step fi-page-csv size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-csv" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf181;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-delete size-12"></i><i class="step fi-page-delete size-14"></i><i class="step fi-page-delete size-16"></i><i class="step fi-page-delete size-18"></i><i class="step fi-page-delete size-21"></i><i class="step fi-page-delete size-24"></i><i class="step fi-page-delete size-36"></i><i class="step fi-page-delete size-48"></i><i class="step fi-page-delete size-60"></i><i class="step fi-page-delete size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-delete" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf182;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-doc size-12"></i><i class="step fi-page-doc size-14"></i><i class="step fi-page-doc size-16"></i><i class="step fi-page-doc size-18"></i><i class="step fi-page-doc size-21"></i><i class="step fi-page-doc size-24"></i><i class="step fi-page-doc size-36"></i><i class="step fi-page-doc size-48"></i><i class="step fi-page-doc size-60"></i><i class="step fi-page-doc size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-doc" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf183;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-edit size-12"></i><i class="step fi-page-edit size-14"></i><i class="step fi-page-edit size-16"></i><i class="step fi-page-edit size-18"></i><i class="step fi-page-edit size-21"></i><i class="step fi-page-edit size-24"></i><i class="step fi-page-edit size-36"></i><i class="step fi-page-edit size-48"></i><i class="step fi-page-edit size-60"></i><i class="step fi-page-edit size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-edit" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf184;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-export-csv size-12"></i><i class="step fi-page-export-csv size-14"></i><i class="step fi-page-export-csv size-16"></i><i class="step fi-page-export-csv size-18"></i><i class="step fi-page-export-csv size-21"></i><i class="step fi-page-export-csv size-24"></i><i class="step fi-page-export-csv size-36"></i><i class="step fi-page-export-csv size-48"></i><i class="step fi-page-export-csv size-60"></i><i class="step fi-page-export-csv size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-export-csv" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf185;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-export-doc size-12"></i><i class="step fi-page-export-doc size-14"></i><i class="step fi-page-export-doc size-16"></i><i class="step fi-page-export-doc size-18"></i><i class="step fi-page-export-doc size-21"></i><i class="step fi-page-export-doc size-24"></i><i class="step fi-page-export-doc size-36"></i><i class="step fi-page-export-doc size-48"></i><i class="step fi-page-export-doc size-60"></i><i class="step fi-page-export-doc size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-export-doc" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf186;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-export-pdf size-12"></i><i class="step fi-page-export-pdf size-14"></i><i class="step fi-page-export-pdf size-16"></i><i class="step fi-page-export-pdf size-18"></i><i class="step fi-page-export-pdf size-21"></i><i class="step fi-page-export-pdf size-24"></i><i class="step fi-page-export-pdf size-36"></i><i class="step fi-page-export-pdf size-48"></i><i class="step fi-page-export-pdf size-60"></i><i class="step fi-page-export-pdf size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-export-pdf" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf187;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-export size-12"></i><i class="step fi-page-export size-14"></i><i class="step fi-page-export size-16"></i><i class="step fi-page-export size-18"></i><i class="step fi-page-export size-21"></i><i class="step fi-page-export size-24"></i><i class="step fi-page-export size-36"></i><i class="step fi-page-export size-48"></i><i class="step fi-page-export size-60"></i><i class="step fi-page-export size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-export" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf188;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-filled size-12"></i><i class="step fi-page-filled size-14"></i><i class="step fi-page-filled size-16"></i><i class="step fi-page-filled size-18"></i><i class="step fi-page-filled size-21"></i><i class="step fi-page-filled size-24"></i><i class="step fi-page-filled size-36"></i><i class="step fi-page-filled size-48"></i><i class="step fi-page-filled size-60"></i><i class="step fi-page-filled size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-filled" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf189;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-multiple size-12"></i><i class="step fi-page-multiple size-14"></i><i class="step fi-page-multiple size-16"></i><i class="step fi-page-multiple size-18"></i><i class="step fi-page-multiple size-21"></i><i class="step fi-page-multiple size-24"></i><i class="step fi-page-multiple size-36"></i><i class="step fi-page-multiple size-48"></i><i class="step fi-page-multiple size-60"></i><i class="step fi-page-multiple size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-multiple" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-pdf size-12"></i><i class="step fi-page-pdf size-14"></i><i class="step fi-page-pdf size-16"></i><i class="step fi-page-pdf size-18"></i><i class="step fi-page-pdf size-21"></i><i class="step fi-page-pdf size-24"></i><i class="step fi-page-pdf size-36"></i><i class="step fi-page-pdf size-48"></i><i class="step fi-page-pdf size-60"></i><i class="step fi-page-pdf size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-pdf" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-remove size-12"></i><i class="step fi-page-remove size-14"></i><i class="step fi-page-remove size-16"></i><i class="step fi-page-remove size-18"></i><i class="step fi-page-remove size-21"></i><i class="step fi-page-remove size-24"></i><i class="step fi-page-remove size-36"></i><i class="step fi-page-remove size-48"></i><i class="step fi-page-remove size-60"></i><i class="step fi-page-remove size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-remove" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page-search size-12"></i><i class="step fi-page-search size-14"></i><i class="step fi-page-search size-16"></i><i class="step fi-page-search size-18"></i><i class="step fi-page-search size-21"></i><i class="step fi-page-search size-24"></i><i class="step fi-page-search size-36"></i><i class="step fi-page-search size-48"></i><i class="step fi-page-search size-60"></i><i class="step fi-page-search size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page-search" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-page size-12"></i><i class="step fi-page size-14"></i><i class="step fi-page size-16"></i><i class="step fi-page size-18"></i><i class="step fi-page size-21"></i><i class="step fi-page size-24"></i><i class="step fi-page size-36"></i><i class="step fi-page size-48"></i><i class="step fi-page size-60"></i><i class="step fi-page size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-page" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-paint-bucket size-12"></i><i class="step fi-paint-bucket size-14"></i><i class="step fi-paint-bucket size-16"></i><i class="step fi-paint-bucket size-18"></i><i class="step fi-paint-bucket size-21"></i><i class="step fi-paint-bucket size-24"></i><i class="step fi-paint-bucket size-36"></i><i class="step fi-paint-bucket size-48"></i><i class="step fi-paint-bucket size-60"></i><i class="step fi-paint-bucket size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-paint-bucket" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-paperclip size-12"></i><i class="step fi-paperclip size-14"></i><i class="step fi-paperclip size-16"></i><i class="step fi-paperclip size-18"></i><i class="step fi-paperclip size-21"></i><i class="step fi-paperclip size-24"></i><i class="step fi-paperclip size-36"></i><i class="step fi-paperclip size-48"></i><i class="step fi-paperclip size-60"></i><i class="step fi-paperclip size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-paperclip" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf190;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-pause size-12"></i><i class="step fi-pause size-14"></i><i class="step fi-pause size-16"></i><i class="step fi-pause size-18"></i><i class="step fi-pause size-21"></i><i class="step fi-pause size-24"></i><i class="step fi-pause size-36"></i><i class="step fi-pause size-48"></i><i class="step fi-pause size-60"></i><i class="step fi-pause size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-pause" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf191;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-paw size-12"></i><i class="step fi-paw size-14"></i><i class="step fi-paw size-16"></i><i class="step fi-paw size-18"></i><i class="step fi-paw size-21"></i><i class="step fi-paw size-24"></i><i class="step fi-paw size-36"></i><i class="step fi-paw size-48"></i><i class="step fi-paw size-60"></i><i class="step fi-paw size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-paw" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf192;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-paypal size-12"></i><i class="step fi-paypal size-14"></i><i class="step fi-paypal size-16"></i><i class="step fi-paypal size-18"></i><i class="step fi-paypal size-21"></i><i class="step fi-paypal size-24"></i><i class="step fi-paypal size-36"></i><i class="step fi-paypal size-48"></i><i class="step fi-paypal size-60"></i><i class="step fi-paypal size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-paypal" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf193;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-pencil size-12"></i><i class="step fi-pencil size-14"></i><i class="step fi-pencil size-16"></i><i class="step fi-pencil size-18"></i><i class="step fi-pencil size-21"></i><i class="step fi-pencil size-24"></i><i class="step fi-pencil size-36"></i><i class="step fi-pencil size-48"></i><i class="step fi-pencil size-60"></i><i class="step fi-pencil size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-pencil" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf194;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-photo size-12"></i><i class="step fi-photo size-14"></i><i class="step fi-photo size-16"></i><i class="step fi-photo size-18"></i><i class="step fi-photo size-21"></i><i class="step fi-photo size-24"></i><i class="step fi-photo size-36"></i><i class="step fi-photo size-48"></i><i class="step fi-photo size-60"></i><i class="step fi-photo size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-photo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf195;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-play-circle size-12"></i><i class="step fi-play-circle size-14"></i><i class="step fi-play-circle size-16"></i><i class="step fi-play-circle size-18"></i><i class="step fi-play-circle size-21"></i><i class="step fi-play-circle size-24"></i><i class="step fi-play-circle size-36"></i><i class="step fi-play-circle size-48"></i><i class="step fi-play-circle size-60"></i><i class="step fi-play-circle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-play-circle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf196;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-play-video size-12"></i><i class="step fi-play-video size-14"></i><i class="step fi-play-video size-16"></i><i class="step fi-play-video size-18"></i><i class="step fi-play-video size-21"></i><i class="step fi-play-video size-24"></i><i class="step fi-play-video size-36"></i><i class="step fi-play-video size-48"></i><i class="step fi-play-video size-60"></i><i class="step fi-play-video size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-play-video" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf197;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-play size-12"></i><i class="step fi-play size-14"></i><i class="step fi-play size-16"></i><i class="step fi-play size-18"></i><i class="step fi-play size-21"></i><i class="step fi-play size-24"></i><i class="step fi-play size-36"></i><i class="step fi-play size-48"></i><i class="step fi-play size-60"></i><i class="step fi-play size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-play" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf198;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-plus size-12"></i><i class="step fi-plus size-14"></i><i class="step fi-plus size-16"></i><i class="step fi-plus size-18"></i><i class="step fi-plus size-21"></i><i class="step fi-plus size-24"></i><i class="step fi-plus size-36"></i><i class="step fi-plus size-48"></i><i class="step fi-plus size-60"></i><i class="step fi-plus size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-plus" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf199;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-pound size-12"></i><i class="step fi-pound size-14"></i><i class="step fi-pound size-16"></i><i class="step fi-pound size-18"></i><i class="step fi-pound size-21"></i><i class="step fi-pound size-24"></i><i class="step fi-pound size-36"></i><i class="step fi-pound size-48"></i><i class="step fi-pound size-60"></i><i class="step fi-pound size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-pound" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-power size-12"></i><i class="step fi-power size-14"></i><i class="step fi-power size-16"></i><i class="step fi-power size-18"></i><i class="step fi-power size-21"></i><i class="step fi-power size-24"></i><i class="step fi-power size-36"></i><i class="step fi-power size-48"></i><i class="step fi-power size-60"></i><i class="step fi-power size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-power" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-previous size-12"></i><i class="step fi-previous size-14"></i><i class="step fi-previous size-16"></i><i class="step fi-previous size-18"></i><i class="step fi-previous size-21"></i><i class="step fi-previous size-24"></i><i class="step fi-previous size-36"></i><i class="step fi-previous size-48"></i><i class="step fi-previous size-60"></i><i class="step fi-previous size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-previous" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-price-tag size-12"></i><i class="step fi-price-tag size-14"></i><i class="step fi-price-tag size-16"></i><i class="step fi-price-tag size-18"></i><i class="step fi-price-tag size-21"></i><i class="step fi-price-tag size-24"></i><i class="step fi-price-tag size-36"></i><i class="step fi-price-tag size-48"></i><i class="step fi-price-tag size-60"></i><i class="step fi-price-tag size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-price-tag" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-pricetag-multiple size-12"></i><i class="step fi-pricetag-multiple size-14"></i><i class="step fi-pricetag-multiple size-16"></i><i class="step fi-pricetag-multiple size-18"></i><i class="step fi-pricetag-multiple size-21"></i><i class="step fi-pricetag-multiple size-24"></i><i class="step fi-pricetag-multiple size-36"></i><i class="step fi-pricetag-multiple size-48"></i><i class="step fi-pricetag-multiple size-60"></i><i class="step fi-pricetag-multiple size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-pricetag-multiple" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-print size-12"></i><i class="step fi-print size-14"></i><i class="step fi-print size-16"></i><i class="step fi-print size-18"></i><i class="step fi-print size-21"></i><i class="step fi-print size-24"></i><i class="step fi-print size-36"></i><i class="step fi-print size-48"></i><i class="step fi-print size-60"></i><i class="step fi-print size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-print" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-prohibited size-12"></i><i class="step fi-prohibited size-14"></i><i class="step fi-prohibited size-16"></i><i class="step fi-prohibited size-18"></i><i class="step fi-prohibited size-21"></i><i class="step fi-prohibited size-24"></i><i class="step fi-prohibited size-36"></i><i class="step fi-prohibited size-48"></i><i class="step fi-prohibited size-60"></i><i class="step fi-prohibited size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-prohibited" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a0;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-projection-screen size-12"></i><i class="step fi-projection-screen size-14"></i><i class="step fi-projection-screen size-16"></i><i class="step fi-projection-screen size-18"></i><i class="step fi-projection-screen size-21"></i><i class="step fi-projection-screen size-24"></i><i class="step fi-projection-screen size-36"></i><i class="step fi-projection-screen size-48"></i><i class="step fi-projection-screen size-60"></i><i class="step fi-projection-screen size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-projection-screen" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a1;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-puzzle size-12"></i><i class="step fi-puzzle size-14"></i><i class="step fi-puzzle size-16"></i><i class="step fi-puzzle size-18"></i><i class="step fi-puzzle size-21"></i><i class="step fi-puzzle size-24"></i><i class="step fi-puzzle size-36"></i><i class="step fi-puzzle size-48"></i><i class="step fi-puzzle size-60"></i><i class="step fi-puzzle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-puzzle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a2;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-quote size-12"></i><i class="step fi-quote size-14"></i><i class="step fi-quote size-16"></i><i class="step fi-quote size-18"></i><i class="step fi-quote size-21"></i><i class="step fi-quote size-24"></i><i class="step fi-quote size-36"></i><i class="step fi-quote size-48"></i><i class="step fi-quote size-60"></i><i class="step fi-quote size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-quote" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a3;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-record size-12"></i><i class="step fi-record size-14"></i><i class="step fi-record size-16"></i><i class="step fi-record size-18"></i><i class="step fi-record size-21"></i><i class="step fi-record size-24"></i><i class="step fi-record size-36"></i><i class="step fi-record size-48"></i><i class="step fi-record size-60"></i><i class="step fi-record size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-record" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a4;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-refresh size-12"></i><i class="step fi-refresh size-14"></i><i class="step fi-refresh size-16"></i><i class="step fi-refresh size-18"></i><i class="step fi-refresh size-21"></i><i class="step fi-refresh size-24"></i><i class="step fi-refresh size-36"></i><i class="step fi-refresh size-48"></i><i class="step fi-refresh size-60"></i><i class="step fi-refresh size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-refresh" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a5;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-results-demographics size-12"></i><i class="step fi-results-demographics size-14"></i><i class="step fi-results-demographics size-16"></i><i class="step fi-results-demographics size-18"></i><i class="step fi-results-demographics size-21"></i><i class="step fi-results-demographics size-24"></i><i class="step fi-results-demographics size-36"></i><i class="step fi-results-demographics size-48"></i><i class="step fi-results-demographics size-60"></i><i class="step fi-results-demographics size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-results-demographics" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a6;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-results size-12"></i><i class="step fi-results size-14"></i><i class="step fi-results size-16"></i><i class="step fi-results size-18"></i><i class="step fi-results size-21"></i><i class="step fi-results size-24"></i><i class="step fi-results size-36"></i><i class="step fi-results size-48"></i><i class="step fi-results size-60"></i><i class="step fi-results size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-results" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a7;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-rewind-ten size-12"></i><i class="step fi-rewind-ten size-14"></i><i class="step fi-rewind-ten size-16"></i><i class="step fi-rewind-ten size-18"></i><i class="step fi-rewind-ten size-21"></i><i class="step fi-rewind-ten size-24"></i><i class="step fi-rewind-ten size-36"></i><i class="step fi-rewind-ten size-48"></i><i class="step fi-rewind-ten size-60"></i><i class="step fi-rewind-ten size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-rewind-ten" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a8;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-rewind size-12"></i><i class="step fi-rewind size-14"></i><i class="step fi-rewind size-16"></i><i class="step fi-rewind size-18"></i><i class="step fi-rewind size-21"></i><i class="step fi-rewind size-24"></i><i class="step fi-rewind size-36"></i><i class="step fi-rewind size-48"></i><i class="step fi-rewind size-60"></i><i class="step fi-rewind size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-rewind" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a9;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-rss size-12"></i><i class="step fi-rss size-14"></i><i class="step fi-rss size-16"></i><i class="step fi-rss size-18"></i><i class="step fi-rss size-21"></i><i class="step fi-rss size-24"></i><i class="step fi-rss size-36"></i><i class="step fi-rss size-48"></i><i class="step fi-rss size-60"></i><i class="step fi-rss size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-rss" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1aa;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-safety-cone size-12"></i><i class="step fi-safety-cone size-14"></i><i class="step fi-safety-cone size-16"></i><i class="step fi-safety-cone size-18"></i><i class="step fi-safety-cone size-21"></i><i class="step fi-safety-cone size-24"></i><i class="step fi-safety-cone size-36"></i><i class="step fi-safety-cone size-48"></i><i class="step fi-safety-cone size-60"></i><i class="step fi-safety-cone size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-safety-cone" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ab;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-save size-12"></i><i class="step fi-save size-14"></i><i class="step fi-save size-16"></i><i class="step fi-save size-18"></i><i class="step fi-save size-21"></i><i class="step fi-save size-24"></i><i class="step fi-save size-36"></i><i class="step fi-save size-48"></i><i class="step fi-save size-60"></i><i class="step fi-save size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-save" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ac;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-share size-12"></i><i class="step fi-share size-14"></i><i class="step fi-share size-16"></i><i class="step fi-share size-18"></i><i class="step fi-share size-21"></i><i class="step fi-share size-24"></i><i class="step fi-share size-36"></i><i class="step fi-share size-48"></i><i class="step fi-share size-60"></i><i class="step fi-share size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-share" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ad;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-sheriff-badge size-12"></i><i class="step fi-sheriff-badge size-14"></i><i class="step fi-sheriff-badge size-16"></i><i class="step fi-sheriff-badge size-18"></i><i class="step fi-sheriff-badge size-21"></i><i class="step fi-sheriff-badge size-24"></i><i class="step fi-sheriff-badge size-36"></i><i class="step fi-sheriff-badge size-48"></i><i class="step fi-sheriff-badge size-60"></i><i class="step fi-sheriff-badge size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-sheriff-badge" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ae;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-shield size-12"></i><i class="step fi-shield size-14"></i><i class="step fi-shield size-16"></i><i class="step fi-shield size-18"></i><i class="step fi-shield size-21"></i><i class="step fi-shield size-24"></i><i class="step fi-shield size-36"></i><i class="step fi-shield size-48"></i><i class="step fi-shield size-60"></i><i class="step fi-shield size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-shield" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1af;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-shopping-bag size-12"></i><i class="step fi-shopping-bag size-14"></i><i class="step fi-shopping-bag size-16"></i><i class="step fi-shopping-bag size-18"></i><i class="step fi-shopping-bag size-21"></i><i class="step fi-shopping-bag size-24"></i><i class="step fi-shopping-bag size-36"></i><i class="step fi-shopping-bag size-48"></i><i class="step fi-shopping-bag size-60"></i><i class="step fi-shopping-bag size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-shopping-bag" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b0;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-shopping-cart size-12"></i><i class="step fi-shopping-cart size-14"></i><i class="step fi-shopping-cart size-16"></i><i class="step fi-shopping-cart size-18"></i><i class="step fi-shopping-cart size-21"></i><i class="step fi-shopping-cart size-24"></i><i class="step fi-shopping-cart size-36"></i><i class="step fi-shopping-cart size-48"></i><i class="step fi-shopping-cart size-60"></i><i class="step fi-shopping-cart size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-shopping-cart" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b1;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-shuffle size-12"></i><i class="step fi-shuffle size-14"></i><i class="step fi-shuffle size-16"></i><i class="step fi-shuffle size-18"></i><i class="step fi-shuffle size-21"></i><i class="step fi-shuffle size-24"></i><i class="step fi-shuffle size-36"></i><i class="step fi-shuffle size-48"></i><i class="step fi-shuffle size-60"></i><i class="step fi-shuffle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-shuffle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b2;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-skull size-12"></i><i class="step fi-skull size-14"></i><i class="step fi-skull size-16"></i><i class="step fi-skull size-18"></i><i class="step fi-skull size-21"></i><i class="step fi-skull size-24"></i><i class="step fi-skull size-36"></i><i class="step fi-skull size-48"></i><i class="step fi-skull size-60"></i><i class="step fi-skull size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-skull" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b3;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-500px size-12"></i><i class="step fi-social-500px size-14"></i><i class="step fi-social-500px size-16"></i><i class="step fi-social-500px size-18"></i><i class="step fi-social-500px size-21"></i><i class="step fi-social-500px size-24"></i><i class="step fi-social-500px size-36"></i><i class="step fi-social-500px size-48"></i><i class="step fi-social-500px size-60"></i><i class="step fi-social-500px size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-500px" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b4;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-adobe size-12"></i><i class="step fi-social-adobe size-14"></i><i class="step fi-social-adobe size-16"></i><i class="step fi-social-adobe size-18"></i><i class="step fi-social-adobe size-21"></i><i class="step fi-social-adobe size-24"></i><i class="step fi-social-adobe size-36"></i><i class="step fi-social-adobe size-48"></i><i class="step fi-social-adobe size-60"></i><i class="step fi-social-adobe size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-adobe" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b5;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-amazon size-12"></i><i class="step fi-social-amazon size-14"></i><i class="step fi-social-amazon size-16"></i><i class="step fi-social-amazon size-18"></i><i class="step fi-social-amazon size-21"></i><i class="step fi-social-amazon size-24"></i><i class="step fi-social-amazon size-36"></i><i class="step fi-social-amazon size-48"></i><i class="step fi-social-amazon size-60"></i><i class="step fi-social-amazon size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-amazon" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b6;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-android size-12"></i><i class="step fi-social-android size-14"></i><i class="step fi-social-android size-16"></i><i class="step fi-social-android size-18"></i><i class="step fi-social-android size-21"></i><i class="step fi-social-android size-24"></i><i class="step fi-social-android size-36"></i><i class="step fi-social-android size-48"></i><i class="step fi-social-android size-60"></i><i class="step fi-social-android size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-android" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b7;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-apple size-12"></i><i class="step fi-social-apple size-14"></i><i class="step fi-social-apple size-16"></i><i class="step fi-social-apple size-18"></i><i class="step fi-social-apple size-21"></i><i class="step fi-social-apple size-24"></i><i class="step fi-social-apple size-36"></i><i class="step fi-social-apple size-48"></i><i class="step fi-social-apple size-60"></i><i class="step fi-social-apple size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-apple" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b8;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-behance size-12"></i><i class="step fi-social-behance size-14"></i><i class="step fi-social-behance size-16"></i><i class="step fi-social-behance size-18"></i><i class="step fi-social-behance size-21"></i><i class="step fi-social-behance size-24"></i><i class="step fi-social-behance size-36"></i><i class="step fi-social-behance size-48"></i><i class="step fi-social-behance size-60"></i><i class="step fi-social-behance size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-behance" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b9;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-bing size-12"></i><i class="step fi-social-bing size-14"></i><i class="step fi-social-bing size-16"></i><i class="step fi-social-bing size-18"></i><i class="step fi-social-bing size-21"></i><i class="step fi-social-bing size-24"></i><i class="step fi-social-bing size-36"></i><i class="step fi-social-bing size-48"></i><i class="step fi-social-bing size-60"></i><i class="step fi-social-bing size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-bing" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ba;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-blogger size-12"></i><i class="step fi-social-blogger size-14"></i><i class="step fi-social-blogger size-16"></i><i class="step fi-social-blogger size-18"></i><i class="step fi-social-blogger size-21"></i><i class="step fi-social-blogger size-24"></i><i class="step fi-social-blogger size-36"></i><i class="step fi-social-blogger size-48"></i><i class="step fi-social-blogger size-60"></i><i class="step fi-social-blogger size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-blogger" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bb;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-delicious size-12"></i><i class="step fi-social-delicious size-14"></i><i class="step fi-social-delicious size-16"></i><i class="step fi-social-delicious size-18"></i><i class="step fi-social-delicious size-21"></i><i class="step fi-social-delicious size-24"></i><i class="step fi-social-delicious size-36"></i><i class="step fi-social-delicious size-48"></i><i class="step fi-social-delicious size-60"></i><i class="step fi-social-delicious size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-delicious" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bc;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-designer-news size-12"></i><i class="step fi-social-designer-news size-14"></i><i class="step fi-social-designer-news size-16"></i><i class="step fi-social-designer-news size-18"></i><i class="step fi-social-designer-news size-21"></i><i class="step fi-social-designer-news size-24"></i><i class="step fi-social-designer-news size-36"></i><i class="step fi-social-designer-news size-48"></i><i class="step fi-social-designer-news size-60"></i><i class="step fi-social-designer-news size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-designer-news" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bd;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-deviant-art size-12"></i><i class="step fi-social-deviant-art size-14"></i><i class="step fi-social-deviant-art size-16"></i><i class="step fi-social-deviant-art size-18"></i><i class="step fi-social-deviant-art size-21"></i><i class="step fi-social-deviant-art size-24"></i><i class="step fi-social-deviant-art size-36"></i><i class="step fi-social-deviant-art size-48"></i><i class="step fi-social-deviant-art size-60"></i><i class="step fi-social-deviant-art size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-deviant-art" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1be;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-digg size-12"></i><i class="step fi-social-digg size-14"></i><i class="step fi-social-digg size-16"></i><i class="step fi-social-digg size-18"></i><i class="step fi-social-digg size-21"></i><i class="step fi-social-digg size-24"></i><i class="step fi-social-digg size-36"></i><i class="step fi-social-digg size-48"></i><i class="step fi-social-digg size-60"></i><i class="step fi-social-digg size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-digg" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bf;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-dribbble size-12"></i><i class="step fi-social-dribbble size-14"></i><i class="step fi-social-dribbble size-16"></i><i class="step fi-social-dribbble size-18"></i><i class="step fi-social-dribbble size-21"></i><i class="step fi-social-dribbble size-24"></i><i class="step fi-social-dribbble size-36"></i><i class="step fi-social-dribbble size-48"></i><i class="step fi-social-dribbble size-60"></i><i class="step fi-social-dribbble size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-dribbble" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c0;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-drive size-12"></i><i class="step fi-social-drive size-14"></i><i class="step fi-social-drive size-16"></i><i class="step fi-social-drive size-18"></i><i class="step fi-social-drive size-21"></i><i class="step fi-social-drive size-24"></i><i class="step fi-social-drive size-36"></i><i class="step fi-social-drive size-48"></i><i class="step fi-social-drive size-60"></i><i class="step fi-social-drive size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-drive" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c1;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-dropbox size-12"></i><i class="step fi-social-dropbox size-14"></i><i class="step fi-social-dropbox size-16"></i><i class="step fi-social-dropbox size-18"></i><i class="step fi-social-dropbox size-21"></i><i class="step fi-social-dropbox size-24"></i><i class="step fi-social-dropbox size-36"></i><i class="step fi-social-dropbox size-48"></i><i class="step fi-social-dropbox size-60"></i><i class="step fi-social-dropbox size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-dropbox" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c2;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-evernote size-12"></i><i class="step fi-social-evernote size-14"></i><i class="step fi-social-evernote size-16"></i><i class="step fi-social-evernote size-18"></i><i class="step fi-social-evernote size-21"></i><i class="step fi-social-evernote size-24"></i><i class="step fi-social-evernote size-36"></i><i class="step fi-social-evernote size-48"></i><i class="step fi-social-evernote size-60"></i><i class="step fi-social-evernote size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-evernote" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c3;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-facebook size-12"></i><i class="step fi-social-facebook size-14"></i><i class="step fi-social-facebook size-16"></i><i class="step fi-social-facebook size-18"></i><i class="step fi-social-facebook size-21"></i><i class="step fi-social-facebook size-24"></i><i class="step fi-social-facebook size-36"></i><i class="step fi-social-facebook size-48"></i><i class="step fi-social-facebook size-60"></i><i class="step fi-social-facebook size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-facebook" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c4;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-flickr size-12"></i><i class="step fi-social-flickr size-14"></i><i class="step fi-social-flickr size-16"></i><i class="step fi-social-flickr size-18"></i><i class="step fi-social-flickr size-21"></i><i class="step fi-social-flickr size-24"></i><i class="step fi-social-flickr size-36"></i><i class="step fi-social-flickr size-48"></i><i class="step fi-social-flickr size-60"></i><i class="step fi-social-flickr size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-flickr" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c5;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-forrst size-12"></i><i class="step fi-social-forrst size-14"></i><i class="step fi-social-forrst size-16"></i><i class="step fi-social-forrst size-18"></i><i class="step fi-social-forrst size-21"></i><i class="step fi-social-forrst size-24"></i><i class="step fi-social-forrst size-36"></i><i class="step fi-social-forrst size-48"></i><i class="step fi-social-forrst size-60"></i><i class="step fi-social-forrst size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-forrst" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c6;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-foursquare size-12"></i><i class="step fi-social-foursquare size-14"></i><i class="step fi-social-foursquare size-16"></i><i class="step fi-social-foursquare size-18"></i><i class="step fi-social-foursquare size-21"></i><i class="step fi-social-foursquare size-24"></i><i class="step fi-social-foursquare size-36"></i><i class="step fi-social-foursquare size-48"></i><i class="step fi-social-foursquare size-60"></i><i class="step fi-social-foursquare size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-foursquare" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c7;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-game-center size-12"></i><i class="step fi-social-game-center size-14"></i><i class="step fi-social-game-center size-16"></i><i class="step fi-social-game-center size-18"></i><i class="step fi-social-game-center size-21"></i><i class="step fi-social-game-center size-24"></i><i class="step fi-social-game-center size-36"></i><i class="step fi-social-game-center size-48"></i><i class="step fi-social-game-center size-60"></i><i class="step fi-social-game-center size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-game-center" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c8;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-github size-12"></i><i class="step fi-social-github size-14"></i><i class="step fi-social-github size-16"></i><i class="step fi-social-github size-18"></i><i class="step fi-social-github size-21"></i><i class="step fi-social-github size-24"></i><i class="step fi-social-github size-36"></i><i class="step fi-social-github size-48"></i><i class="step fi-social-github size-60"></i><i class="step fi-social-github size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-github" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c9;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-google-plus size-12"></i><i class="step fi-social-google-plus size-14"></i><i class="step fi-social-google-plus size-16"></i><i class="step fi-social-google-plus size-18"></i><i class="step fi-social-google-plus size-21"></i><i class="step fi-social-google-plus size-24"></i><i class="step fi-social-google-plus size-36"></i><i class="step fi-social-google-plus size-48"></i><i class="step fi-social-google-plus size-60"></i><i class="step fi-social-google-plus size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-google-plus" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ca;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-hacker-news size-12"></i><i class="step fi-social-hacker-news size-14"></i><i class="step fi-social-hacker-news size-16"></i><i class="step fi-social-hacker-news size-18"></i><i class="step fi-social-hacker-news size-21"></i><i class="step fi-social-hacker-news size-24"></i><i class="step fi-social-hacker-news size-36"></i><i class="step fi-social-hacker-news size-48"></i><i class="step fi-social-hacker-news size-60"></i><i class="step fi-social-hacker-news size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-hacker-news" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cb;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-hi5 size-12"></i><i class="step fi-social-hi5 size-14"></i><i class="step fi-social-hi5 size-16"></i><i class="step fi-social-hi5 size-18"></i><i class="step fi-social-hi5 size-21"></i><i class="step fi-social-hi5 size-24"></i><i class="step fi-social-hi5 size-36"></i><i class="step fi-social-hi5 size-48"></i><i class="step fi-social-hi5 size-60"></i><i class="step fi-social-hi5 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-hi5" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cc;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-instagram size-12"></i><i class="step fi-social-instagram size-14"></i><i class="step fi-social-instagram size-16"></i><i class="step fi-social-instagram size-18"></i><i class="step fi-social-instagram size-21"></i><i class="step fi-social-instagram size-24"></i><i class="step fi-social-instagram size-36"></i><i class="step fi-social-instagram size-48"></i><i class="step fi-social-instagram size-60"></i><i class="step fi-social-instagram size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-instagram" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cd;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-joomla size-12"></i><i class="step fi-social-joomla size-14"></i><i class="step fi-social-joomla size-16"></i><i class="step fi-social-joomla size-18"></i><i class="step fi-social-joomla size-21"></i><i class="step fi-social-joomla size-24"></i><i class="step fi-social-joomla size-36"></i><i class="step fi-social-joomla size-48"></i><i class="step fi-social-joomla size-60"></i><i class="step fi-social-joomla size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-joomla" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ce;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-lastfm size-12"></i><i class="step fi-social-lastfm size-14"></i><i class="step fi-social-lastfm size-16"></i><i class="step fi-social-lastfm size-18"></i><i class="step fi-social-lastfm size-21"></i><i class="step fi-social-lastfm size-24"></i><i class="step fi-social-lastfm size-36"></i><i class="step fi-social-lastfm size-48"></i><i class="step fi-social-lastfm size-60"></i><i class="step fi-social-lastfm size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-lastfm" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cf;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-linkedin size-12"></i><i class="step fi-social-linkedin size-14"></i><i class="step fi-social-linkedin size-16"></i><i class="step fi-social-linkedin size-18"></i><i class="step fi-social-linkedin size-21"></i><i class="step fi-social-linkedin size-24"></i><i class="step fi-social-linkedin size-36"></i><i class="step fi-social-linkedin size-48"></i><i class="step fi-social-linkedin size-60"></i><i class="step fi-social-linkedin size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-linkedin" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d0;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-medium size-12"></i><i class="step fi-social-medium size-14"></i><i class="step fi-social-medium size-16"></i><i class="step fi-social-medium size-18"></i><i class="step fi-social-medium size-21"></i><i class="step fi-social-medium size-24"></i><i class="step fi-social-medium size-36"></i><i class="step fi-social-medium size-48"></i><i class="step fi-social-medium size-60"></i><i class="step fi-social-medium size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-medium" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d1;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-myspace size-12"></i><i class="step fi-social-myspace size-14"></i><i class="step fi-social-myspace size-16"></i><i class="step fi-social-myspace size-18"></i><i class="step fi-social-myspace size-21"></i><i class="step fi-social-myspace size-24"></i><i class="step fi-social-myspace size-36"></i><i class="step fi-social-myspace size-48"></i><i class="step fi-social-myspace size-60"></i><i class="step fi-social-myspace size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-myspace" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d2;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-orkut size-12"></i><i class="step fi-social-orkut size-14"></i><i class="step fi-social-orkut size-16"></i><i class="step fi-social-orkut size-18"></i><i class="step fi-social-orkut size-21"></i><i class="step fi-social-orkut size-24"></i><i class="step fi-social-orkut size-36"></i><i class="step fi-social-orkut size-48"></i><i class="step fi-social-orkut size-60"></i><i class="step fi-social-orkut size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-orkut" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d3;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-path size-12"></i><i class="step fi-social-path size-14"></i><i class="step fi-social-path size-16"></i><i class="step fi-social-path size-18"></i><i class="step fi-social-path size-21"></i><i class="step fi-social-path size-24"></i><i class="step fi-social-path size-36"></i><i class="step fi-social-path size-48"></i><i class="step fi-social-path size-60"></i><i class="step fi-social-path size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-path" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d4;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-picasa size-12"></i><i class="step fi-social-picasa size-14"></i><i class="step fi-social-picasa size-16"></i><i class="step fi-social-picasa size-18"></i><i class="step fi-social-picasa size-21"></i><i class="step fi-social-picasa size-24"></i><i class="step fi-social-picasa size-36"></i><i class="step fi-social-picasa size-48"></i><i class="step fi-social-picasa size-60"></i><i class="step fi-social-picasa size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-picasa" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d5;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-pinterest size-12"></i><i class="step fi-social-pinterest size-14"></i><i class="step fi-social-pinterest size-16"></i><i class="step fi-social-pinterest size-18"></i><i class="step fi-social-pinterest size-21"></i><i class="step fi-social-pinterest size-24"></i><i class="step fi-social-pinterest size-36"></i><i class="step fi-social-pinterest size-48"></i><i class="step fi-social-pinterest size-60"></i><i class="step fi-social-pinterest size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-pinterest" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d6;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-rdio size-12"></i><i class="step fi-social-rdio size-14"></i><i class="step fi-social-rdio size-16"></i><i class="step fi-social-rdio size-18"></i><i class="step fi-social-rdio size-21"></i><i class="step fi-social-rdio size-24"></i><i class="step fi-social-rdio size-36"></i><i class="step fi-social-rdio size-48"></i><i class="step fi-social-rdio size-60"></i><i class="step fi-social-rdio size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-rdio" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d7;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-reddit size-12"></i><i class="step fi-social-reddit size-14"></i><i class="step fi-social-reddit size-16"></i><i class="step fi-social-reddit size-18"></i><i class="step fi-social-reddit size-21"></i><i class="step fi-social-reddit size-24"></i><i class="step fi-social-reddit size-36"></i><i class="step fi-social-reddit size-48"></i><i class="step fi-social-reddit size-60"></i><i class="step fi-social-reddit size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-reddit" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d8;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-skillshare size-12"></i><i class="step fi-social-skillshare size-14"></i><i class="step fi-social-skillshare size-16"></i><i class="step fi-social-skillshare size-18"></i><i class="step fi-social-skillshare size-21"></i><i class="step fi-social-skillshare size-24"></i><i class="step fi-social-skillshare size-36"></i><i class="step fi-social-skillshare size-48"></i><i class="step fi-social-skillshare size-60"></i><i class="step fi-social-skillshare size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-skillshare" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d9;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-skype size-12"></i><i class="step fi-social-skype size-14"></i><i class="step fi-social-skype size-16"></i><i class="step fi-social-skype size-18"></i><i class="step fi-social-skype size-21"></i><i class="step fi-social-skype size-24"></i><i class="step fi-social-skype size-36"></i><i class="step fi-social-skype size-48"></i><i class="step fi-social-skype size-60"></i><i class="step fi-social-skype size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-skype" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1da;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-smashing-mag size-12"></i><i class="step fi-social-smashing-mag size-14"></i><i class="step fi-social-smashing-mag size-16"></i><i class="step fi-social-smashing-mag size-18"></i><i class="step fi-social-smashing-mag size-21"></i><i class="step fi-social-smashing-mag size-24"></i><i class="step fi-social-smashing-mag size-36"></i><i class="step fi-social-smashing-mag size-48"></i><i class="step fi-social-smashing-mag size-60"></i><i class="step fi-social-smashing-mag size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-smashing-mag" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1db;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-snapchat size-12"></i><i class="step fi-social-snapchat size-14"></i><i class="step fi-social-snapchat size-16"></i><i class="step fi-social-snapchat size-18"></i><i class="step fi-social-snapchat size-21"></i><i class="step fi-social-snapchat size-24"></i><i class="step fi-social-snapchat size-36"></i><i class="step fi-social-snapchat size-48"></i><i class="step fi-social-snapchat size-60"></i><i class="step fi-social-snapchat size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-snapchat" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1dc;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-spotify size-12"></i><i class="step fi-social-spotify size-14"></i><i class="step fi-social-spotify size-16"></i><i class="step fi-social-spotify size-18"></i><i class="step fi-social-spotify size-21"></i><i class="step fi-social-spotify size-24"></i><i class="step fi-social-spotify size-36"></i><i class="step fi-social-spotify size-48"></i><i class="step fi-social-spotify size-60"></i><i class="step fi-social-spotify size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-spotify" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1dd;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-squidoo size-12"></i><i class="step fi-social-squidoo size-14"></i><i class="step fi-social-squidoo size-16"></i><i class="step fi-social-squidoo size-18"></i><i class="step fi-social-squidoo size-21"></i><i class="step fi-social-squidoo size-24"></i><i class="step fi-social-squidoo size-36"></i><i class="step fi-social-squidoo size-48"></i><i class="step fi-social-squidoo size-60"></i><i class="step fi-social-squidoo size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-squidoo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1de;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-stack-overflow size-12"></i><i class="step fi-social-stack-overflow size-14"></i><i class="step fi-social-stack-overflow size-16"></i><i class="step fi-social-stack-overflow size-18"></i><i class="step fi-social-stack-overflow size-21"></i><i class="step fi-social-stack-overflow size-24"></i><i class="step fi-social-stack-overflow size-36"></i><i class="step fi-social-stack-overflow size-48"></i><i class="step fi-social-stack-overflow size-60"></i><i class="step fi-social-stack-overflow size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-stack-overflow" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1df;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-steam size-12"></i><i class="step fi-social-steam size-14"></i><i class="step fi-social-steam size-16"></i><i class="step fi-social-steam size-18"></i><i class="step fi-social-steam size-21"></i><i class="step fi-social-steam size-24"></i><i class="step fi-social-steam size-36"></i><i class="step fi-social-steam size-48"></i><i class="step fi-social-steam size-60"></i><i class="step fi-social-steam size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-steam" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e0;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-stumbleupon size-12"></i><i class="step fi-social-stumbleupon size-14"></i><i class="step fi-social-stumbleupon size-16"></i><i class="step fi-social-stumbleupon size-18"></i><i class="step fi-social-stumbleupon size-21"></i><i class="step fi-social-stumbleupon size-24"></i><i class="step fi-social-stumbleupon size-36"></i><i class="step fi-social-stumbleupon size-48"></i><i class="step fi-social-stumbleupon size-60"></i><i class="step fi-social-stumbleupon size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-stumbleupon" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e1;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-treehouse size-12"></i><i class="step fi-social-treehouse size-14"></i><i class="step fi-social-treehouse size-16"></i><i class="step fi-social-treehouse size-18"></i><i class="step fi-social-treehouse size-21"></i><i class="step fi-social-treehouse size-24"></i><i class="step fi-social-treehouse size-36"></i><i class="step fi-social-treehouse size-48"></i><i class="step fi-social-treehouse size-60"></i><i class="step fi-social-treehouse size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-treehouse" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e2;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-tumblr size-12"></i><i class="step fi-social-tumblr size-14"></i><i class="step fi-social-tumblr size-16"></i><i class="step fi-social-tumblr size-18"></i><i class="step fi-social-tumblr size-21"></i><i class="step fi-social-tumblr size-24"></i><i class="step fi-social-tumblr size-36"></i><i class="step fi-social-tumblr size-48"></i><i class="step fi-social-tumblr size-60"></i><i class="step fi-social-tumblr size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-tumblr" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e3;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-twitter size-12"></i><i class="step fi-social-twitter size-14"></i><i class="step fi-social-twitter size-16"></i><i class="step fi-social-twitter size-18"></i><i class="step fi-social-twitter size-21"></i><i class="step fi-social-twitter size-24"></i><i class="step fi-social-twitter size-36"></i><i class="step fi-social-twitter size-48"></i><i class="step fi-social-twitter size-60"></i><i class="step fi-social-twitter size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-twitter" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e4;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-vimeo size-12"></i><i class="step fi-social-vimeo size-14"></i><i class="step fi-social-vimeo size-16"></i><i class="step fi-social-vimeo size-18"></i><i class="step fi-social-vimeo size-21"></i><i class="step fi-social-vimeo size-24"></i><i class="step fi-social-vimeo size-36"></i><i class="step fi-social-vimeo size-48"></i><i class="step fi-social-vimeo size-60"></i><i class="step fi-social-vimeo size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-vimeo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e5;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-windows size-12"></i><i class="step fi-social-windows size-14"></i><i class="step fi-social-windows size-16"></i><i class="step fi-social-windows size-18"></i><i class="step fi-social-windows size-21"></i><i class="step fi-social-windows size-24"></i><i class="step fi-social-windows size-36"></i><i class="step fi-social-windows size-48"></i><i class="step fi-social-windows size-60"></i><i class="step fi-social-windows size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-windows" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e6;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-xbox size-12"></i><i class="step fi-social-xbox size-14"></i><i class="step fi-social-xbox size-16"></i><i class="step fi-social-xbox size-18"></i><i class="step fi-social-xbox size-21"></i><i class="step fi-social-xbox size-24"></i><i class="step fi-social-xbox size-36"></i><i class="step fi-social-xbox size-48"></i><i class="step fi-social-xbox size-60"></i><i class="step fi-social-xbox size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-xbox" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e7;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-yahoo size-12"></i><i class="step fi-social-yahoo size-14"></i><i class="step fi-social-yahoo size-16"></i><i class="step fi-social-yahoo size-18"></i><i class="step fi-social-yahoo size-21"></i><i class="step fi-social-yahoo size-24"></i><i class="step fi-social-yahoo size-36"></i><i class="step fi-social-yahoo size-48"></i><i class="step fi-social-yahoo size-60"></i><i class="step fi-social-yahoo size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-yahoo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e8;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-yelp size-12"></i><i class="step fi-social-yelp size-14"></i><i class="step fi-social-yelp size-16"></i><i class="step fi-social-yelp size-18"></i><i class="step fi-social-yelp size-21"></i><i class="step fi-social-yelp size-24"></i><i class="step fi-social-yelp size-36"></i><i class="step fi-social-yelp size-48"></i><i class="step fi-social-yelp size-60"></i><i class="step fi-social-yelp size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-yelp" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e9;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-youtube size-12"></i><i class="step fi-social-youtube size-14"></i><i class="step fi-social-youtube size-16"></i><i class="step fi-social-youtube size-18"></i><i class="step fi-social-youtube size-21"></i><i class="step fi-social-youtube size-24"></i><i class="step fi-social-youtube size-36"></i><i class="step fi-social-youtube size-48"></i><i class="step fi-social-youtube size-60"></i><i class="step fi-social-youtube size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-youtube" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ea;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-zerply size-12"></i><i class="step fi-social-zerply size-14"></i><i class="step fi-social-zerply size-16"></i><i class="step fi-social-zerply size-18"></i><i class="step fi-social-zerply size-21"></i><i class="step fi-social-zerply size-24"></i><i class="step fi-social-zerply size-36"></i><i class="step fi-social-zerply size-48"></i><i class="step fi-social-zerply size-60"></i><i class="step fi-social-zerply size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-zerply" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1eb;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-social-zurb size-12"></i><i class="step fi-social-zurb size-14"></i><i class="step fi-social-zurb size-16"></i><i class="step fi-social-zurb size-18"></i><i class="step fi-social-zurb size-21"></i><i class="step fi-social-zurb size-24"></i><i class="step fi-social-zurb size-36"></i><i class="step fi-social-zurb size-48"></i><i class="step fi-social-zurb size-60"></i><i class="step fi-social-zurb size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-social-zurb" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ec;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-sound size-12"></i><i class="step fi-sound size-14"></i><i class="step fi-sound size-16"></i><i class="step fi-sound size-18"></i><i class="step fi-sound size-21"></i><i class="step fi-sound size-24"></i><i class="step fi-sound size-36"></i><i class="step fi-sound size-48"></i><i class="step fi-sound size-60"></i><i class="step fi-sound size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-sound" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ed;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-star size-12"></i><i class="step fi-star size-14"></i><i class="step fi-star size-16"></i><i class="step fi-star size-18"></i><i class="step fi-star size-21"></i><i class="step fi-star size-24"></i><i class="step fi-star size-36"></i><i class="step fi-star size-48"></i><i class="step fi-star size-60"></i><i class="step fi-star size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-star" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ee;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-stop size-12"></i><i class="step fi-stop size-14"></i><i class="step fi-stop size-16"></i><i class="step fi-stop size-18"></i><i class="step fi-stop size-21"></i><i class="step fi-stop size-24"></i><i class="step fi-stop size-36"></i><i class="step fi-stop size-48"></i><i class="step fi-stop size-60"></i><i class="step fi-stop size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-stop" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ef;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-strikethrough size-12"></i><i class="step fi-strikethrough size-14"></i><i class="step fi-strikethrough size-16"></i><i class="step fi-strikethrough size-18"></i><i class="step fi-strikethrough size-21"></i><i class="step fi-strikethrough size-24"></i><i class="step fi-strikethrough size-36"></i><i class="step fi-strikethrough size-48"></i><i class="step fi-strikethrough size-60"></i><i class="step fi-strikethrough size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-strikethrough" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f0;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-subscript size-12"></i><i class="step fi-subscript size-14"></i><i class="step fi-subscript size-16"></i><i class="step fi-subscript size-18"></i><i class="step fi-subscript size-21"></i><i class="step fi-subscript size-24"></i><i class="step fi-subscript size-36"></i><i class="step fi-subscript size-48"></i><i class="step fi-subscript size-60"></i><i class="step fi-subscript size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-subscript" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f1;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-superscript size-12"></i><i class="step fi-superscript size-14"></i><i class="step fi-superscript size-16"></i><i class="step fi-superscript size-18"></i><i class="step fi-superscript size-21"></i><i class="step fi-superscript size-24"></i><i class="step fi-superscript size-36"></i><i class="step fi-superscript size-48"></i><i class="step fi-superscript size-60"></i><i class="step fi-superscript size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-superscript" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f2;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-tablet-landscape size-12"></i><i class="step fi-tablet-landscape size-14"></i><i class="step fi-tablet-landscape size-16"></i><i class="step fi-tablet-landscape size-18"></i><i class="step fi-tablet-landscape size-21"></i><i class="step fi-tablet-landscape size-24"></i><i class="step fi-tablet-landscape size-36"></i><i class="step fi-tablet-landscape size-48"></i><i class="step fi-tablet-landscape size-60"></i><i class="step fi-tablet-landscape size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-tablet-landscape" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f3;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-tablet-portrait size-12"></i><i class="step fi-tablet-portrait size-14"></i><i class="step fi-tablet-portrait size-16"></i><i class="step fi-tablet-portrait size-18"></i><i class="step fi-tablet-portrait size-21"></i><i class="step fi-tablet-portrait size-24"></i><i class="step fi-tablet-portrait size-36"></i><i class="step fi-tablet-portrait size-48"></i><i class="step fi-tablet-portrait size-60"></i><i class="step fi-tablet-portrait size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-tablet-portrait" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f4;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-target-two size-12"></i><i class="step fi-target-two size-14"></i><i class="step fi-target-two size-16"></i><i class="step fi-target-two size-18"></i><i class="step fi-target-two size-21"></i><i class="step fi-target-two size-24"></i><i class="step fi-target-two size-36"></i><i class="step fi-target-two size-48"></i><i class="step fi-target-two size-60"></i><i class="step fi-target-two size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-target-two" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f5;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-target size-12"></i><i class="step fi-target size-14"></i><i class="step fi-target size-16"></i><i class="step fi-target size-18"></i><i class="step fi-target size-21"></i><i class="step fi-target size-24"></i><i class="step fi-target size-36"></i><i class="step fi-target size-48"></i><i class="step fi-target size-60"></i><i class="step fi-target size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-target" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f6;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-telephone-accessible size-12"></i><i class="step fi-telephone-accessible size-14"></i><i class="step fi-telephone-accessible size-16"></i><i class="step fi-telephone-accessible size-18"></i><i class="step fi-telephone-accessible size-21"></i><i class="step fi-telephone-accessible size-24"></i><i class="step fi-telephone-accessible size-36"></i><i class="step fi-telephone-accessible size-48"></i><i class="step fi-telephone-accessible size-60"></i><i class="step fi-telephone-accessible size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-telephone-accessible" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f7;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-telephone size-12"></i><i class="step fi-telephone size-14"></i><i class="step fi-telephone size-16"></i><i class="step fi-telephone size-18"></i><i class="step fi-telephone size-21"></i><i class="step fi-telephone size-24"></i><i class="step fi-telephone size-36"></i><i class="step fi-telephone size-48"></i><i class="step fi-telephone size-60"></i><i class="step fi-telephone size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-telephone" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f8;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-text-color size-12"></i><i class="step fi-text-color size-14"></i><i class="step fi-text-color size-16"></i><i class="step fi-text-color size-18"></i><i class="step fi-text-color size-21"></i><i class="step fi-text-color size-24"></i><i class="step fi-text-color size-36"></i><i class="step fi-text-color size-48"></i><i class="step fi-text-color size-60"></i><i class="step fi-text-color size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-text-color" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f9;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-thumbnails size-12"></i><i class="step fi-thumbnails size-14"></i><i class="step fi-thumbnails size-16"></i><i class="step fi-thumbnails size-18"></i><i class="step fi-thumbnails size-21"></i><i class="step fi-thumbnails size-24"></i><i class="step fi-thumbnails size-36"></i><i class="step fi-thumbnails size-48"></i><i class="step fi-thumbnails size-60"></i><i class="step fi-thumbnails size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-thumbnails" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fa;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-ticket size-12"></i><i class="step fi-ticket size-14"></i><i class="step fi-ticket size-16"></i><i class="step fi-ticket size-18"></i><i class="step fi-ticket size-21"></i><i class="step fi-ticket size-24"></i><i class="step fi-ticket size-36"></i><i class="step fi-ticket size-48"></i><i class="step fi-ticket size-60"></i><i class="step fi-ticket size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-ticket" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fb;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torso-business size-12"></i><i class="step fi-torso-business size-14"></i><i class="step fi-torso-business size-16"></i><i class="step fi-torso-business size-18"></i><i class="step fi-torso-business size-21"></i><i class="step fi-torso-business size-24"></i><i class="step fi-torso-business size-36"></i><i class="step fi-torso-business size-48"></i><i class="step fi-torso-business size-60"></i><i class="step fi-torso-business size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torso-business" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fc;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torso-female size-12"></i><i class="step fi-torso-female size-14"></i><i class="step fi-torso-female size-16"></i><i class="step fi-torso-female size-18"></i><i class="step fi-torso-female size-21"></i><i class="step fi-torso-female size-24"></i><i class="step fi-torso-female size-36"></i><i class="step fi-torso-female size-48"></i><i class="step fi-torso-female size-60"></i><i class="step fi-torso-female size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torso-female" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fd;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torso size-12"></i><i class="step fi-torso size-14"></i><i class="step fi-torso size-16"></i><i class="step fi-torso size-18"></i><i class="step fi-torso size-21"></i><i class="step fi-torso size-24"></i><i class="step fi-torso size-36"></i><i class="step fi-torso size-48"></i><i class="step fi-torso size-60"></i><i class="step fi-torso size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torso" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fe;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torsos-all-female size-12"></i><i class="step fi-torsos-all-female size-14"></i><i class="step fi-torsos-all-female size-16"></i><i class="step fi-torsos-all-female size-18"></i><i class="step fi-torsos-all-female size-21"></i><i class="step fi-torsos-all-female size-24"></i><i class="step fi-torsos-all-female size-36"></i><i class="step fi-torsos-all-female size-48"></i><i class="step fi-torsos-all-female size-60"></i><i class="step fi-torsos-all-female size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torsos-all-female" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ff;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torsos-all size-12"></i><i class="step fi-torsos-all size-14"></i><i class="step fi-torsos-all size-16"></i><i class="step fi-torsos-all size-18"></i><i class="step fi-torsos-all size-21"></i><i class="step fi-torsos-all size-24"></i><i class="step fi-torsos-all size-36"></i><i class="step fi-torsos-all size-48"></i><i class="step fi-torsos-all size-60"></i><i class="step fi-torsos-all size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torsos-all" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf200;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torsos-female-male size-12"></i><i class="step fi-torsos-female-male size-14"></i><i class="step fi-torsos-female-male size-16"></i><i class="step fi-torsos-female-male size-18"></i><i class="step fi-torsos-female-male size-21"></i><i class="step fi-torsos-female-male size-24"></i><i class="step fi-torsos-female-male size-36"></i><i class="step fi-torsos-female-male size-48"></i><i class="step fi-torsos-female-male size-60"></i><i class="step fi-torsos-female-male size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torsos-female-male" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf201;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torsos-male-female size-12"></i><i class="step fi-torsos-male-female size-14"></i><i class="step fi-torsos-male-female size-16"></i><i class="step fi-torsos-male-female size-18"></i><i class="step fi-torsos-male-female size-21"></i><i class="step fi-torsos-male-female size-24"></i><i class="step fi-torsos-male-female size-36"></i><i class="step fi-torsos-male-female size-48"></i><i class="step fi-torsos-male-female size-60"></i><i class="step fi-torsos-male-female size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torsos-male-female" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf202;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-torsos size-12"></i><i class="step fi-torsos size-14"></i><i class="step fi-torsos size-16"></i><i class="step fi-torsos size-18"></i><i class="step fi-torsos size-21"></i><i class="step fi-torsos size-24"></i><i class="step fi-torsos size-36"></i><i class="step fi-torsos size-48"></i><i class="step fi-torsos size-60"></i><i class="step fi-torsos size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-torsos" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf203;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-trash size-12"></i><i class="step fi-trash size-14"></i><i class="step fi-trash size-16"></i><i class="step fi-trash size-18"></i><i class="step fi-trash size-21"></i><i class="step fi-trash size-24"></i><i class="step fi-trash size-36"></i><i class="step fi-trash size-48"></i><i class="step fi-trash size-60"></i><i class="step fi-trash size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-trash" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf204;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-trees size-12"></i><i class="step fi-trees size-14"></i><i class="step fi-trees size-16"></i><i class="step fi-trees size-18"></i><i class="step fi-trees size-21"></i><i class="step fi-trees size-24"></i><i class="step fi-trees size-36"></i><i class="step fi-trees size-48"></i><i class="step fi-trees size-60"></i><i class="step fi-trees size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-trees" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf205;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-trophy size-12"></i><i class="step fi-trophy size-14"></i><i class="step fi-trophy size-16"></i><i class="step fi-trophy size-18"></i><i class="step fi-trophy size-21"></i><i class="step fi-trophy size-24"></i><i class="step fi-trophy size-36"></i><i class="step fi-trophy size-48"></i><i class="step fi-trophy size-60"></i><i class="step fi-trophy size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-trophy" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf206;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-underline size-12"></i><i class="step fi-underline size-14"></i><i class="step fi-underline size-16"></i><i class="step fi-underline size-18"></i><i class="step fi-underline size-21"></i><i class="step fi-underline size-24"></i><i class="step fi-underline size-36"></i><i class="step fi-underline size-48"></i><i class="step fi-underline size-60"></i><i class="step fi-underline size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-underline" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf207;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-universal-access size-12"></i><i class="step fi-universal-access size-14"></i><i class="step fi-universal-access size-16"></i><i class="step fi-universal-access size-18"></i><i class="step fi-universal-access size-21"></i><i class="step fi-universal-access size-24"></i><i class="step fi-universal-access size-36"></i><i class="step fi-universal-access size-48"></i><i class="step fi-universal-access size-60"></i><i class="step fi-universal-access size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-universal-access" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf208;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-unlink size-12"></i><i class="step fi-unlink size-14"></i><i class="step fi-unlink size-16"></i><i class="step fi-unlink size-18"></i><i class="step fi-unlink size-21"></i><i class="step fi-unlink size-24"></i><i class="step fi-unlink size-36"></i><i class="step fi-unlink size-48"></i><i class="step fi-unlink size-60"></i><i class="step fi-unlink size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-unlink" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf209;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-unlock size-12"></i><i class="step fi-unlock size-14"></i><i class="step fi-unlock size-16"></i><i class="step fi-unlock size-18"></i><i class="step fi-unlock size-21"></i><i class="step fi-unlock size-24"></i><i class="step fi-unlock size-36"></i><i class="step fi-unlock size-48"></i><i class="step fi-unlock size-60"></i><i class="step fi-unlock size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-unlock" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-upload-cloud size-12"></i><i class="step fi-upload-cloud size-14"></i><i class="step fi-upload-cloud size-16"></i><i class="step fi-upload-cloud size-18"></i><i class="step fi-upload-cloud size-21"></i><i class="step fi-upload-cloud size-24"></i><i class="step fi-upload-cloud size-36"></i><i class="step fi-upload-cloud size-48"></i><i class="step fi-upload-cloud size-60"></i><i class="step fi-upload-cloud size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-upload-cloud" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-upload size-12"></i><i class="step fi-upload size-14"></i><i class="step fi-upload size-16"></i><i class="step fi-upload size-18"></i><i class="step fi-upload size-21"></i><i class="step fi-upload size-24"></i><i class="step fi-upload size-36"></i><i class="step fi-upload size-48"></i><i class="step fi-upload size-60"></i><i class="step fi-upload size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-upload" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-usb size-12"></i><i class="step fi-usb size-14"></i><i class="step fi-usb size-16"></i><i class="step fi-usb size-18"></i><i class="step fi-usb size-21"></i><i class="step fi-usb size-24"></i><i class="step fi-usb size-36"></i><i class="step fi-usb size-48"></i><i class="step fi-usb size-60"></i><i class="step fi-usb size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-usb" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-video size-12"></i><i class="step fi-video size-14"></i><i class="step fi-video size-16"></i><i class="step fi-video size-18"></i><i class="step fi-video size-21"></i><i class="step fi-video size-24"></i><i class="step fi-video size-36"></i><i class="step fi-video size-48"></i><i class="step fi-video size-60"></i><i class="step fi-video size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-video" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-volume-none size-12"></i><i class="step fi-volume-none size-14"></i><i class="step fi-volume-none size-16"></i><i class="step fi-volume-none size-18"></i><i class="step fi-volume-none size-21"></i><i class="step fi-volume-none size-24"></i><i class="step fi-volume-none size-36"></i><i class="step fi-volume-none size-48"></i><i class="step fi-volume-none size-60"></i><i class="step fi-volume-none size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-volume-none" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-volume-strike size-12"></i><i class="step fi-volume-strike size-14"></i><i class="step fi-volume-strike size-16"></i><i class="step fi-volume-strike size-18"></i><i class="step fi-volume-strike size-21"></i><i class="step fi-volume-strike size-24"></i><i class="step fi-volume-strike size-36"></i><i class="step fi-volume-strike size-48"></i><i class="step fi-volume-strike size-60"></i><i class="step fi-volume-strike size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-volume-strike" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf210;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-volume size-12"></i><i class="step fi-volume size-14"></i><i class="step fi-volume size-16"></i><i class="step fi-volume size-18"></i><i class="step fi-volume size-21"></i><i class="step fi-volume size-24"></i><i class="step fi-volume size-36"></i><i class="step fi-volume size-48"></i><i class="step fi-volume size-60"></i><i class="step fi-volume size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-volume" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf211;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-web size-12"></i><i class="step fi-web size-14"></i><i class="step fi-web size-16"></i><i class="step fi-web size-18"></i><i class="step fi-web size-21"></i><i class="step fi-web size-24"></i><i class="step fi-web size-36"></i><i class="step fi-web size-48"></i><i class="step fi-web size-60"></i><i class="step fi-web size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-web" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf212;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-wheelchair size-12"></i><i class="step fi-wheelchair size-14"></i><i class="step fi-wheelchair size-16"></i><i class="step fi-wheelchair size-18"></i><i class="step fi-wheelchair size-21"></i><i class="step fi-wheelchair size-24"></i><i class="step fi-wheelchair size-36"></i><i class="step fi-wheelchair size-48"></i><i class="step fi-wheelchair size-60"></i><i class="step fi-wheelchair size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-wheelchair" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf213;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-widget size-12"></i><i class="step fi-widget size-14"></i><i class="step fi-widget size-16"></i><i class="step fi-widget size-18"></i><i class="step fi-widget size-21"></i><i class="step fi-widget size-24"></i><i class="step fi-widget size-36"></i><i class="step fi-widget size-48"></i><i class="step fi-widget size-60"></i><i class="step fi-widget size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-widget" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf214;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-wrench size-12"></i><i class="step fi-wrench size-14"></i><i class="step fi-wrench size-16"></i><i class="step fi-wrench size-18"></i><i class="step fi-wrench size-21"></i><i class="step fi-wrench size-24"></i><i class="step fi-wrench size-36"></i><i class="step fi-wrench size-48"></i><i class="step fi-wrench size-60"></i><i class="step fi-wrench size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-wrench" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf215;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-x-circle size-12"></i><i class="step fi-x-circle size-14"></i><i class="step fi-x-circle size-16"></i><i class="step fi-x-circle size-18"></i><i class="step fi-x-circle size-21"></i><i class="step fi-x-circle size-24"></i><i class="step fi-x-circle size-36"></i><i class="step fi-x-circle size-48"></i><i class="step fi-x-circle size-60"></i><i class="step fi-x-circle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-x-circle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf216;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-x size-12"></i><i class="step fi-x size-14"></i><i class="step fi-x size-16"></i><i class="step fi-x size-18"></i><i class="step fi-x size-21"></i><i class="step fi-x size-24"></i><i class="step fi-x size-36"></i><i class="step fi-x size-48"></i><i class="step fi-x size-60"></i><i class="step fi-x size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-x" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf217;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-yen size-12"></i><i class="step fi-yen size-14"></i><i class="step fi-yen size-16"></i><i class="step fi-yen size-18"></i><i class="step fi-yen size-21"></i><i class="step fi-yen size-24"></i><i class="step fi-yen size-36"></i><i class="step fi-yen size-48"></i><i class="step fi-yen size-60"></i><i class="step fi-yen size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-yen" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf218;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-zoom-in size-12"></i><i class="step fi-zoom-in size-14"></i><i class="step fi-zoom-in size-16"></i><i class="step fi-zoom-in size-18"></i><i class="step fi-zoom-in size-21"></i><i class="step fi-zoom-in size-24"></i><i class="step fi-zoom-in size-36"></i><i class="step fi-zoom-in size-48"></i><i class="step fi-zoom-in size-60"></i><i class="step fi-zoom-in size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-zoom-in" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf219;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step fi-zoom-out size-12"></i><i class="step fi-zoom-out size-14"></i><i class="step fi-zoom-out size-16"></i><i class="step fi-zoom-out size-18"></i><i class="step fi-zoom-out size-21"></i><i class="step fi-zoom-out size-24"></i><i class="step fi-zoom-out size-36"></i><i class="step fi-zoom-out size-48"></i><i class="step fi-zoom-out size-60"></i><i class="step fi-zoom-out size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fi-zoom-out" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21a;" />
        </div>
      </div>
   </div>
</div>
</div>
            
          
!
            
              body, html {
  background: #fcc068;  
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 40px auto;
  padding: 3em;
  background: #fefafb;
  border-radius: 20px;
}

.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;
  width: 10%;
}
     
.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;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console