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:
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
Share your thoughts in the comments
Please Login to comment...