Skip to content
Related Articles

Related Articles

How to load font-awesome using SCSS ?
  • Last Updated : 27 Apr, 2020

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">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
      
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <i class="fas fa-thumbs-up"></i>
    </body>
    </html>
  • 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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :