title: Extending Font Awesome
body: <p>I am using Font Awesome on a website.</p>
  
  <p>I have a few custom icons and I would like to keep my code consistent, so I would like to use my new icons in the same way as Font-Awesome.</p>
  
  <p>When I look at a font-awesome icon, it would seem that its content is set with the following CSS:</p>
  
  <pre><code>.icon-dashboard:before
  {
      content: "\f0e5";
  }
  </code></pre>
  
  <p>And then the icon is created as follows:</p>
  
  <pre><code>&lt;a href="#"&gt;&lt;i class="icon-dashboard&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>However, if I have a .png image and try to use it in the same way, it doesn't seem to work:</p>
  
  <pre><code>.icon-network:before
  {
      content: url("images/network-icon.png");
  }
  </code></pre>
  
  <p>This just shows a blank image.  What am I missing here?</p>