Search code examples
cssfontssassfont-awesome-5

fontawesome 5 with sass

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.

Solution

  • 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;