Why is Font Awesome showing a square instead of an icon?

Issue

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:

1. Copied the font Awesome directory into my project.

2. Opened 'font-awesome/scss/_variables.scss' and edited the $fa-font-path variable to point to my font directory.

   $fa-font-path: "project/node_modules/font-awesome/fonts" !default;
   

3. 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.

   /*How I Import At The Top Of My Page*/
   @import "project/node_modules/font-awesome/scss/font-awesome";
   
   /*How I Try To Implement*/
   p:first-child:before{
       content: $fa-var-mobile-phone
    }  
   

From what I have read, it seems that I have some sort of mapping issue but everything looks correct to me.

Solution

From what I can tell from your information supplied. You need to set font-family, that should be the file not just the path.

p:first-child:before{
    content: $fa-var-mobile-phone;
    font-family: 'Your font-awesome';
} 

Answered By - Dejan.S