title: Correct way to use Font Awesome SCSS in a Yeoman's Angular project
body: <p>I created an Angular project using Yeoman's generator, and now I am trying to add the Font Awesome to the project. I installed it using Bower using</p>
  
  <pre><code>bower install fontawesome --save
  </code></pre>
  
  <p>then it automatically added to my <code>app/index.html</code> the following code:</p>
  
  <pre><code>&lt;!-- build:css(.) styles/vendor.css --&gt;
  &lt;!-- bower:css --&gt;
  &lt;link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" /&gt;
  &lt;!-- endbower --&gt;
  &lt;!-- endbuild --&gt;
  </code></pre>
  
  <p>But I didn't want to use it as CSS, but as a <strong>SCSS import</strong> (to be able to change the URL of font files). So I deleted the above code from the HTML page and added the proper code into <code>app/styles/main.scss</code>:</p>
  
  <pre><code>$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
  $fa-font-path: "../bower_components/fontawesome/fonts/"; // &lt;==== here
  
  // bower:scss
  @import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
  @import "fontawesome/scss/font-awesome.scss"; // &lt;==== and here
  // endbower
  </code></pre>
  
  <p>Then I run <code>grunt build</code>, but something (Grunt?) edited my files back to the original ones. The <code>index.html</code> got the <code>&lt;link&gt;</code> again and mine <code>main.scss</code> was kept only with the Bootstrap import.</p>
  
  <p><em>Ok, we are almost there.</em></p>
  
  <p>So I looked at the Bootstrap's <code>bower.json</code> and compared to the Font Awesome's <code>bower.json</code> and I saw the following difference:</p>
  
  <pre><code>// Bootstrap
  "main": [
    "assets/stylesheets/_bootstrap.scss", // it's SCSS
    ...
  ],
  
  // Font Awesome
  "main": [
    "./css/font-awesome.css", // it's CSS
    ...
  ],
  </code></pre>
  
  <p>Then I found a way to properly (not sure) override the Font Awesome's bower configuration using my app's <code>bower.json</code>, and added the following code into it</p>
  
  <pre><code>"overrides": {
    "fontawesome": {
      "main": [
        "./scss/font-awesome.scss", // now it's SCSS
        "./fonts/*"
      ]
    }
  }
  </code></pre>
  
  <p><strong>Question</strong>: Is this the correct way to use Font Awesome as a SCSS import and avoid Grunt of changing my files when building the project? By overriding its default <code>"main"</code> property?</p>