title: Font Awesome icons don't show up correctly during development, installed with bower
body: <p>I scaffold my app with yo</p>
  
  <pre><code>yo gulp-webapp //I create a basic boilerplate with bootstrap sass
  </code></pre>
  
  <p>Then I install FontAwesome</p>
  
  <pre><code>bower install font-awesome --save
  </code></pre>
  
  <p>This is what I have on top of my main.scss</p>
  
  <pre><code>$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
  
  // bower:scss
  @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
  @import "../../bower_components/fontawesome/scss/font-awesome.scss";
  // endbower
  </code></pre>
  
  <p>Then I add this to my html page</p>
  
  <pre><code>&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>And if I launch "gulp serve" It only show a white square, instead if I build with "gulp" the result html works correctly.</p>
  
  <p>The result main.css contain all fa class so I think the problem is with this var</p>
  
  <pre><code>$fa-font-path:        "../fonts" !default;
  </code></pre>
  
  <p>This var is here: bower_components/font-awesome/scss/-variables.scss</p>