How to load font-awesome using SCSS ? - GeeksforGeeks

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:publicresourcesThe public folder will contain your html and css files whereas the resources folder contains your scss files.
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
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
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;


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

@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>
<!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.
"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
npm run compile:sass
Note: Comment/delete the ‘ -ms-filter’ line if you encounter the following error in the style.css file after compiling.
CSS-Misc
Picked
SASS
CSS
Web Technologies
Web technologies Questions
Write From Home
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
Create a Responsive Navbar using ReactJS
Making a div vertically scrollable using CSS
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript