Fontawesome - Sass usage

font awesome Icons integrate in sass for nodejs project..

In Nodejs applications, If you want to integrate fontawesome into scss/sass files, sass files are not readable by browsers, hence we are going to use node-sass to compile sass to scss file.

Fontawesome npm installation

Please install fontawesome free library using npm command

npm install --save @fortawesome/fontawesome-free

we can use css or scss files directly.

Next, import css file into scss using @import line as seen below.

@import '~@fortawesome/fontawesome-free/css/all.min.css

How do you load fontawesome scss files from node_modules?

create a npm project

npm init -Y

this creates nodejs application with default configurations as follows

B:\sassdemo>npm init -y
Wrote to B:\sassdemo\package.json:

  "name": "fontawesome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "keywords": [],
  "author": "",
  "license": "ISC"

Create a app.scss file which loads sass icon files into application scss file

$fa-font-path: "/webfonts"; // destination folder in dist
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../node_modules/@fortawesome/fontawesome-free/scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

And also add font-family to body selector as follows. For regular and solid icons, we have to use Font Awesome 5 Free as value for font-family attribute

body {
    font-family: 'Font Awesome 5 Free'; 

This enables to use the fontawesome icons in your nodejs application

if you want to compile project into css, use node-sass command.

Next, Install node-sass npm library using below command

npm install node-sass --save-dev

node-sass is used to compile scss into css to manually compile it.