title: FontAwesome loading but not displaying in Chrome, Safari or Firefox (displays small boxes)
body: <p>On Rails 3.2.1 and Ruby 1.9.2, I have font-awesome.css, font-awesome.min.css and font-awesome-ie7.min.css in an app/assets/fonts directory.</p>
  
  <p>Here is the @import declaration I am using:</p>
  
  <pre><code>@font-face {
      font-family: 'FontAwesome';
      src: url("./fonts/fontawesome-webfont.eot");
      src: url("./fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
      url("./fonts/fontawesome-webfont.woff") format('woff'),
      url("./fonts/fontawesome-webfont.ttf") format('truetype'),
      url("./fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>I am telling the application to load and compile the fonts folder as part of the asset pipeline in config/application.rb like so:</p>
  
  <pre><code>config.assets.paths &lt;&lt; "#{Rails.root}/app/assets/fonts"
  
  config.assets.precompile += %w( .svg .eot .woff .ttf ) 
  </code></pre>
  
  <p>I also have the following in my application.css file:</p>
  
  <pre><code> *= require_self
   *= require_tree .
   *= require ./../fonts/font-awesome
  </code></pre>
  
  <p>Finally, this is my HTML:</p>
  
  <pre><code>&lt;i class="icon-facebook"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>The problem is that where the icons should be displaying, there is instead a small little box that displays. I have this in my app's main css file:</p>
  
  <pre><code>i {
    width: 1em;
    height: 1em;
    display:block;
    cursor: pointer;
  } 
  </code></pre>
  
  <p>... but that doesn't display the icons either.</p>
  
  <p>font-awesome.css seems to be loading correctly, as this appears in the source code:</p>
  
  <pre><code>&lt;link href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" type="text/css"&gt;
  </code></pre>
  
  <p>Why are these small little boxes showing up in place of the icons? Clearly I am missing something ... </p>
  
  <p>Any help would be much appreciated.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Still don't know why the above isn't working, but I ended up creating a link relation to an externally hosted font-awesome stylesheet in my  tag, as follows:</p>
  
  <pre><code>&lt;link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>I would still rather find a solution to the above though in case something goes wrong with the linked site.</p>