fontawesome 5 with sass - css

Question

I am having a problem working with font awesome 5 and sass I have followed the instructions on their webpage to get started but i can seem to get the icons to appear i have a directory
C:\Users\myName\Learn\public\scss\vendors\font-awesome\fontawesome.scss
in my public\scss folder i have a home.scss file where i import fontawesome.scss as follows
#import "vendors/font-awesome/fontawesome.scss";
when i compile the code it shows the fontawesome classes and stuff when i look on the webpage there are no fonts just big white square further research tells me its not loading the webfonts i placed the webfonts folder inside my project in this directory
C:\Users\myName\Learn\public/webfonts
and in the _variables.scss file i modified the fa-path to point to
"../webfonts"; but this nothing works I would really appreciate any insight that would help me solve this problem because following the instructions online for font awesome 5 with sass doesn't seem to be working for me.

Answer 1

Your folder structure is a bit different, but it should give you a general idea.
// In your main scss file
#import "FontAwesome/fontawesome.scss";
#import "FontAwesome/fa-light.scss";
// In your font awesome variables
$fa-font-path: "../WebFonts" !default;
// Folder structure
/stylesheets/mycompiled.css
// Webfont location
/stylesheets/WebFonts
Its possible that you didn't import either a Light/Regular/Solid part, as everything else seems fine.
If still having issues, you can specify an absolute path (assuming /public is your root)
$fa-font-path: "/WebFonts" !default;
Using absolute path, mine works as
$fa-font-path: "/stylesheets/WebFonts" !default;

Answer 2

As some of the packages are now deprecated I've compiled what I needed to do in order to make FontAwesome 5 Free work with React and Typescript.
Here is how I've solved, considering the solutions posted by (#alexsasharegan and #cchamberlain):
My architecture:
React 16.7.0
Typescript 3.3.1
Bulma 0.7.2 (similar to bootstrap)
FontAwesome 5.7.1
1) Package.json (FontAwesome packages I've used. You can switch to FAR or FAL)
(...)
"dependencies": {
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/free-solid-svg-icons": "^5.7.1",
};
(...)
2) In your webpack.config (very essential):
(...)
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: "url-loader?limit=100000"
}
(...)
3) In your main scss file :
$fa-font-path : "~#fortawesome/fontawesome-free/webfonts";
#import "./node_modules/#fortawesome/fontawesome-free/scss/fontawesome.scss";
#import "./node_modules/#fortawesome/fontawesome-free/scss/solid.scss";
4) That will allow you to use Font Awesome like this:
<i className="fas fa-check" />
Just in time: if you want to use FontAwesome as a component, look at their documentation that well explains how to import the JS files to put it to work.
https://fontawesome.com/how-to-use/on-the-web/using-with/react
Hope it helps and I've posted here because since last message some packages changed.