title: Why is Font Awesome showing a square instead of an icon?
body: <p>I am trying to implement Sass in my project. I have imported font-awesome with NPM and have my main style.scss file that I want to import Font Awesome in. I read through the font-awesome documentation about getting started with Sass. I have:</p>
  <ol>
  <li><p>Copied the font Awesome directory into my project.</p>
  </li>
  <li><p>Opened 'font-awesome/scss/_variables.scss' and edited the <code>$fa-font-path</code> variable to point to my font directory.</p>
  <pre><code>$fa-font-path: &quot;project/node_modules/font-awesome/fonts&quot; !default;
  </code></pre>
  </li>
  <li><p>I imported the font-awesome.scss file into my main style.scss file like so and tried to implement the use of an icon but the icon ends up rendering as a blank square.</p>
  <pre><code>/*How I Import At The Top Of My Page*/
  @import &quot;project/node_modules/font-awesome/scss/font-awesome&quot;;
  
  /*How I Try To Implement*/
  p:first-child:before{
      content: $fa-var-mobile-phone
   }  
  </code></pre>
  </li>
  </ol>
  <p>From what I have read, it seems that I have some sort of mapping issue but everything looks correct to me.</p>