Published 6 days ago by heihachi88
I've installed fontawesome with npm:
npm i --save @fortawesome/fontawesome
Now directory @fortawesome appeared under node_modules, but how exactly to use it?
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.
Hope it helps
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.
@import "[email protected]/fontawesome-free-webfonts/less/fontawesome";
Then import any icons packs you want to use.
@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.
<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
@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
@heihachi88 I use this package like in my example, it's for Font Awesome 5.
See "Web Fonts with CSS" on this page.