title: Using FontAwesome with Sass
body: <p>I'm trying to use FontAwesome in a web Compass project. As there's no specific documentation in the <a href="http://fortawesome.github.io/Font-Awesome/get-started/" rel="noreferrer">FontAwesome page</a>, and I'm not using Bootstrap, I've followed the "Not using Bootstrap?" directions but can't make it work.</p>
  
  <h3>The output</h3>
  
  <p>I get no specific errors, either not found or compiling errors. It's just not showing anything, no icon or text. The FontAwesome font files doesn't seem to be loading.</p>
  
  <h3>The steps I've done</h3>
  
  <ol>
  <li>Download the <code>font-awesome</code> directory</li>
  <li>Copy it to my projects css folder, where I have all my compiled css: <code>project/css/font-awesome</code></li>
  <li>Import the <code>font-awesome.scss</code> file in my main sass stylesheet like this <code>@import url("font-awesome/scss/font-awesome.scss");</code></li>
  <li>Open the <code>font-awesome.scss</code> file and change the import paths so are now relative to my css compiled file and look like this <code>@import url("font-awesome/scss/_variables.scss");</code></li>
  <li>Open the <code>_variables.scss</code> partial inside the font-awesome/scss directory and change the <code>@FontAwesomePath</code> from the one by default to <code>"font-awesome/font/"</code>, to match where the webfonts are</li>
  <li>In my html file, added an example following one in the <a href="http://fortawesome.github.io/Font-Awesome/examples/#inline-icons" rel="noreferrer">FontAwesome examples page</a>, so I added a <code>&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; Some text</code></li>
  <li><p>In my main sass file, added the <code>@font-face</code> declaration </p>
  
  <pre><code>@include font-face('FontAwesome',
  font-files(
  'font-awesome/font/fontawesome-webfont.woff', woff,
  'font-awesome/font/fontawesome-webfont.ttf', ttf,
  'font-awesome/font/fontawesome-webfont.svg', svg),
  'font-awesome/font/fontawesome-webfont.eot');
  
   %icon-font {
       font-family: 'FontAwesome', Helvetica, Arial, sans-serif;
    }
  </code></pre></li>
  <li><p>Extend the font in the selector </p>
  
  <pre><code>.icon-camera-retro {
      @extend %icon-font;
   }
  </code></pre></li>
  <li><p>Compile my main sass stylesheet using <code>compass --watch</code> with no errors</p></li>
  <li>Uploaded everything</li>
  </ol>
  
  <p><br>
  To help clarify, this is the structure of my project:</p>
  
  <pre><code>root
      sass
          mainsass.scss
      css
          font-awesome
              css
                  font-awesome.css
              font
                  font-archives.ttf/.woff/etc
              scss
                  _partials (_variables.scss, _path.scss, _core.scss, etc)
                  font-awesome.scss
          fonts
              some-custom-font.ttf
          mainsass.css
  </code></pre>
  
  <p><br>
  So if anyone has read up to here, which I already appreciate, any ideas please?</p>