fontawesome 5 with sass

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

in your main scss file:

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;