How to load font-awesome using SCSS ?

In order to load font-awesome icons in SCSS you need to follow these steps:

  • Install Font-Awesome starter kit: Go to the font-awesome website and download the free starter-kit for web.
  • Create a project in your directory: In your project directory create 2 folders:
    • public
    • resources

    The public folder will contain your html and css files whereas the resources folder contains your scss files.

  • Run npm init in the terminal: Initialize npm by running the npm init command to create a package.json file.
    npm init
  • Install node-sass: After running the npm init command, install a library called ‘node-sass’. This command will natively compile scss to css.
    Note: Node-sass needs to be installed as a development dependency.

    npm install node-sass --save-dev
  • Create a folder inside resources: Create a folder called assets in resources folder. Unzip the downloaded font-awesome starter kit, copy the scss folder and paste it inside the assets folder.
  • Add webfonts to public folder: Create style.css file inside css folder. Copy the webfonts folder and paste it in public folder.
  • Edit the _variables.scss file in scss folder: Open the variables file and edit the ‘$fa-font-path’ by writing the path of the webfont folder.
    // Variables
    // --------------------------
    $fa-font-path:         "../webfonts" !default;
  • Create a style.scss file inside the scss folder: Create a file style.scss in the scss folder and import font awesome.
    @import "fontawesome.scss";
    @import "solid.scss";
  • Create an index.html file: Create an index.html file in the public directory and add the following code:




    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <i class="fas fa-thumbs-up"></i>



  • Edit the scripts field in package.json file:
    "scripts": {
        "compile:sass": "node-sass resources/assets/scss/style.scss public/css/style.css -w"

    This command will convert scss to css files while keeping track of changes.

  • Compile your code: Open the terminal and use the following command:
    npm run compile:sass

Note: Comment/delete the ‘ -ms-filter’ line if you encounter the following error in the style.css file after compiling.

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.