fontawesome 5 with sass

2
votes

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.

2
cssfontssassfont-awesome-5
The font dir is relative to your compiled css, if your css is in /css ../webfonts should do the trick - Ian Craddock
my complied css is in C:Users\myName\learn\public\css however ../webfonts does not work - Theodore

2 Answers

8
votes

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;
3
votes

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.