Install Font Awesome 5 With Npm For Scss Usage

June 28, 2022 Post a Comment

like title says, I can not install font awesome 5 with npm for scss purposes. Trying to install version 5 Accoring to https://fontawesome.com/how-to-use/use-with-node-js npm i --sa

Solution 1:

npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

In your app.js or equivalent Javascript file,

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

For usage, there are slight changes to the way the class names are being used. Please refer to the icons on Fontawesome site for the "full" class names.

Example

<i class="fas fa-chevron-left"></i>

Although the idea of adding all the 3 variants of fonts into the project seems to be a convenient thing, do beware that this will slow performance when building/compiling your project. Thus, it is highly recommended that you add the fonts you need instead of everything.

Solution 2:

Somehow including fonts in javascript doesn't feel right to me, it's a font and it should belong in css, so here is how to install it using scss:

npm install --save @fortawesome/fontawesome-free
add @import '~@fortawesome/fontawesome-free/css/all.min.css' in your app.scss file
now include app.css to your head and tadaa done

Solution 3:

Add the package;

npm install --save @fortawesome/fontawesome-free

and add the scss files in your app.scss;

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";

then refer the icon in your html files;

<i class="far fa-save"></i>

Solution 4:

In case if you'd like to extract all the Font Awesome specific Javascript files to the vendor.js using Laravel Mix, you'll need to only extract the packages to the extract() method as an array. You won't even need to use the fontawesome.library.add() method to add support for the fonts. This will help you to manage the vendor specific file cache in future.

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-brands',
        '@fortawesome/fontawesome-free-regular',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/fontawesome-free-webfonts'
    ]);

Solution 5:

My understanding of FontAwesome 5 is that they use javascript to add inline SVGs to the DOM.

Take a look at this article: SVG with JS

Rather than compiling an scss file, you just need to include this javascipt one: fontawesome-all.js, any icons you add to your HTML should then be converted to SVGs automatically.

JavaScript Guide