Fontawesome 5 with npm

Published 3 months ago by AlexanderKim

I've installed fontawesome with npm:

npm i --save @fortawesome/fontawesome

Now directory @fortawesome appeared under node_modules, but how exactly to use it?

Documentation says:

import fontawesome from '@fortawesome/fontawesome'
import faUser from '@fortawesome/fontawesome-free-solid/faUser'
import faCircle from '@fortawesome/fontawesome-free-regular/faCircle'
import faFacebook from '@fortawesome/fontawesome-free-brands/faFacebook'

fontawesome.library.add(faUser)
fontawesome.library.add(faCircle)
fontawesome.library.add(faFacebook)

But where to place it? I want to use fontawesome 5 locally without any CDN's.

Best Answer (As Selected By AlexanderKim)
Swaz

There are a couple different ways to do this. I prefer using the "Web Fonts with CSS" method over "SVG with JS" becuase the js icons sometimes flicker when the page loads.

yarn add @fortawesome/fontawesome-free-webfonts --dev

Import the base fontawesome styles.

// resources/assets/less/app.less

@import "[email protected]/fontawesome-free-webfonts/less/fontawesome";

Then import any icons packs you want to use.

// resources/assets/less/app.less

@import "[email protected]/fontawesome-free-webfonts/less/fa-brands";
@import "[email protected]/fontawesome-free-webfonts/less/fa-light";
@import "[email protected]/fontawesome-free-webfonts/less/fa-regular";
@import "[email protected]/fontawesome-free-webfonts/less/fa-solid";

Then you can use in your view like this.

// index.blade.php

<i class="fas fa-camera-retro"></i>

Warning. This makes your css pretty massive because it's loading a class for every single icon. I would recommend using PurgeCSS to strip out any unused classes from your compiled css. There is a great Spatie package for this: https://github.com/spatie/laravel-mix-purgecss

samalapsy

You can either add it to your resources/assets/sass/app.css file this way

// FontAwesome
@import '~font-awesome/scss/font-awesome';
AlexanderKim

It doesn't have scss folder inside.

fontawesome

samalapsy

can you plesae send the link to the plugin so I can also look at it too? Thanks

AlexanderKim
samalapsy

@heihachi88 On which language are you using it with. is it vuejs?

AlexanderKim

not using frontend frameworks yet, just blade.

samalapsy

@heihachi88 npm works with javascript ..... If you want to use blade you have to download the file from this link https://use.fontawesome.com/releases/v5.0.8/fontawesome-free-5.0.8.zip and extract it into your public folder/directory and do the necessary calling in your tag.

Hope it helps

AlexanderKim

so it's impossible to use with npm? I have alternative Bower, but don't won't a lot of package managers.

Swaz
Swaz
3 months ago (56,575 XP)

There are a couple different ways to do this. I prefer using the "Web Fonts with CSS" method over "SVG with JS" becuase the js icons sometimes flicker when the page loads.

yarn add @fortawesome/fontawesome-free-webfonts --dev

Import the base fontawesome styles.

// resources/assets/less/app.less

@import "[email protected]/fontawesome-free-webfonts/less/fontawesome";

Then import any icons packs you want to use.

// resources/assets/less/app.less

@import "[email protected]/fontawesome-free-webfonts/less/fa-brands";
@import "[email protected]/fontawesome-free-webfonts/less/fa-light";
@import "[email protected]/fontawesome-free-webfonts/less/fa-regular";
@import "[email protected]/fontawesome-free-webfonts/less/fa-solid";

Then you can use in your view like this.

// index.blade.php

<i class="fas fa-camera-retro"></i>

Warning. This makes your css pretty massive because it's loading a class for every single icon. I would recommend using PurgeCSS to strip out any unused classes from your compiled css. There is a great Spatie package for this: https://github.com/spatie/laravel-mix-purgecss

AlexanderKim

@Swaz possible to use with scss instead of less and with NPM instead of yarn?

Swaz
Swaz
3 months ago (56,575 XP)

@heihachi88 Yup, the npm package pulls in less, sass and css options.

node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-light.css
node_modules/@fortawesome/fontawesome-free-webfonts/less/fa-light.less
node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-light.scss
AlexanderKim

which npm package do you use? I've used FA5 version and it came without css/less/scss folders.

Swaz
Swaz
3 months ago (56,575 XP)

@heihachi88 I use this package like in my example, it's for Font Awesome 5.

@fortawesome/fontawesome-free-webfonts

See "Web Fonts with CSS" on this page.

https://fontawesome.com/how-to-use/js-component-packages

Please sign in or create an account to participate in this conversation.