Open In App

How to load font-awesome using SCSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.


Last Updated : 27 Apr, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads