Level 2
You can either add it to your resources/assets/sass/app.css file this way
// FontAwesome
@import '~font-awesome/scss/font-awesome';
Mar 13, 2018
13
Level 3
Fontawesome 5 with npm
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.
Level 3
It doesn't have scss folder inside.
Level 2
can you plesae send the link to the plugin so I can also look at it too? Thanks
Level 2
@heihachi88 On which language are you using it with. is it vuejs?
Level 3
not using frontend frameworks yet, just blade.
Level 2
@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
Level 3
so it's impossible to use with npm? I have alternative Bower, but don't won't a lot of package managers.
Level 20
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 "~@fortawesome/fontawesome-free-webfonts/less/fontawesome";
Then import any icons packs you want to use.
// resources/assets/less/app.less
@import "~@fortawesome/fontawesome-free-webfonts/less/fa-brands";
@import "~@fortawesome/fontawesome-free-webfonts/less/fa-light";
@import "~@fortawesome/fontawesome-free-webfonts/less/fa-regular";
@import "~@fortawesome/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
2 likes
Level 3
@Swaz possible to use with scss instead of less and with NPM instead of yarn?
Level 20
@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
Level 3
which npm package do you use? I've used FA5 version and it came without css/less/scss folders.
Level 20
@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.
Please or to participate in this conversation.