title: Font Awesome not working, icons showing as squares
body: <p>So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. </p>
  
  <p>Here's how I include the files in the head:</p>
  
  <pre><code>&lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap-responsive.css"&gt;
          &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
          &lt;link rel="stylesheet" href="css/app.css"&gt;
          &lt;!--[if IE 7]&gt;
              &lt;link rel="stylesheet" href="css/font-awesome-ie7.min.css"&gt;
          &lt;![endif]--&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>And here's an example of me trying to use an icon:</p>
  
  <pre><code>&lt;i class="icon-camera-retro"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>But all that gets rendered in a big square. Does anyone know what could be going on?</p>