title: Sass / Compass Font Awesome issues (displaying odd glyphs instead of icons?)
body: <p>Sass 3.4.9<br>
  Compass 1.0.1<br>
  Font Awesome 4.2</p>
  
  <p>I'm compiling Font Awesome 4.2 (as Sass) with Compass. Instead of intended icons, I get random glpyhs. I'm new to Sass/Compass. This is also my first post ever on StackOverflow (so cool, but I hope I'm asking my question right and what not!). I've googled and searched here until my stack overflowed to no avail. Cannot seem to find anyone else with this same problem.</p>
  
  <p>Directory structure:</p>
  
  <pre><code>[public_html]
  ../config.rb
  ..[assets]
  ....[fonts]
  ....../FontAwesome.otf
  ....../fontawesome-webfont.eot
  ....../fontawesome-webfont.svg
  ....../fontawesome-webfont.ttf
  ....../fontawesome-webfont.wo
  ....[stylesheets]
  ......[css]
  ........screen.css
  ......[sass]
  ......../screen.scss
  ........[font-awesome]
  ........../_bordered-pulled.scss
  ........../_core.scss
  ........../_fixed-width.scss
  ........../_icons.scss
  ........../_larger.scss
  ........../_list.scss
  ........../_mixins.scss
  ........../_path.scss
  ........../_rotated-flipped.scss
  ........../_spinning.scss
  ........../_stacked.scss
  ........../_variables.scss
  ........../font-awesome.scss
  </code></pre>
  
  <p>File "config.rb":</p>
  
  <pre><code>require 'compass/import-once/activate'
  http_path = "/"
  css_dir = "/assets/stylesheets/css"
  sass_dir = "/assets/stylesheets/sass"
  images_dir = "/assets/images"
  javascripts_dir = "/assets/scripts/js"
  output_style = :compact
  relative_assets = true
  line_comments = false
  </code></pre>
  
  <p>File "public_html/assets/stylesheets/sass/screen.scss":</p>
  
  <pre><code>@import "font-awesome/font-awesome";
  </code></pre>
  
  <p>File "public_html/assets/stylesheets/sass/font-awesome/font-awesome.scss":</p>
  
  <pre><code>@import "variables";
  @import "mixins";
  @import "path";
  @import "core";
  @import "larger";
  @import "fixed-width";
  @import "list";
  @import "bordered-pulled";
  @import "spinning";
  @import "rotated-flipped";
  @import "stacked";
  @import "icons";
  </code></pre>
  
  <p>File "public_html/assets/stylesheets/sass/font-awesome/_variables.scss":</p>
  
  <pre><code>$fa-var-building: "\f1ad";
  $fa-var-car: "\f1b9";
  $fa-var-envelope-o: "\f003";
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="/assets/stylesheets/css/screen.css"&gt;
  ...
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-fw fa-building"&gt;&lt;/i&gt; Company&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-fw fa-car"&gt;&lt;/i&gt; Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-fw fa-envelope-o"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <pre><code>ï† Company ï†¹ Services ï€ƒ Contact
  </code></pre>
  
  <p>Chrome Dev tools Network tab data:</p>
  
  <pre><code>Request URL: /assets/fonts/fontawesome-webfont.woff?v=4.2.0
  Request Method: GET
  Status Code: 304 Not Modified
  Connection:Keep-Alive
  Date:Mon, 12 Jan 2015 10:49:56 GMT
  ETag:"246ded-ffac-5018b0cc6f280"
  Keep-Alive:timeout=5, max=98
  Server:Apache/2.2.29 (Unix) mod_ssl/2.2.29 OpenSSL/1.0.1e-fips mod_bwlimited/1.4
  </code></pre>
  
  <p><strong>* EDIT *</strong></p>
  
  <p>Playing with Chrom Dev tools, if I inspect icon element, it shows:</p>
  
  <pre><code>.fa-building:before { content: "ï†­"; } // resulting data in compass compiled screen.css
  </code></pre>
  
  <p>if I change that to:</p>
  
  <pre><code>.fa-building:before { content: "\f1ad"; } // source data in original FA _variables.scss
  </code></pre>
  
  <p>it works correctly. How do I prevent Compass/Sass from converting my escape strings to unicode characters?</p>