Fontawesome - Sass usage

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 the scss file.

Fontawesome npm installation

Please install fontawesome free library using the npm command

npm install --save @fortawesome/fontawesome-free

we can use CSS or scss files directly.

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

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

How do you load fontawesome scss files from node_modules?

create an npm project

npm init -Y

this creates a 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 an app.scss file which loads sass icon files into the 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 the body selector as follows. For regular and solid icons, we have to use Font Awesome 5 Free as a value for the font-family attribute

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

This enables you to use the fontawesome icons in your nodejs application.

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

Next, Install node-sass npm library using the below command.

npm install node-sass --save-dev

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