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"> 

<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.

Article Tags :

CSS

Web Technologies

Write From Home

CSS-Misc

SASS