title: How to implement custom icon font with CSS
body: <p>I'm wondering how to implement these icons using CSS. </p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.icon {
      font-family: 'spokeo';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      position: relative;
  }
  
  .search_icon:before         { content:'\e001'; }
  .down_arrow_icon:before     { content:'\e002'; }
  .up_arrow_icon:before       { content:'\e003'; }
  
  ...etc
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;i class="toc_icon"&gt;&lt;/i&gt;Table of Contents
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>