03 Aug
2018

Install Font Awesome Pro in a Laravel and VueJS App
This is a little tip for showing anybody using Laravel and the built in VueJS - how to add Font Awesome Pro to your application via npm. I am writng this on the basis that you have already setup your app.
Get your Font Awesome Pro account token code
First go to the Font Awesome website and login fontawesome.com. Then choose your account services section - fontawesome.com/account/services and scroll down to the 'Tokens & Access Abroad' section and copy your code... Always keep it secret!
Now open the terminal and enter following with your token code. This will install it globally so you can use it with any application on your machine.
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
Install the dependencies
Now select the directory where your Laravel/Vue app is setup.
cd /hosts/www/laravel-vuejs-app
And install all the dependencies required for Font Awesome 5 Pro.
npm install --save-dev @fortawesome/fontawesome-svg-core
npm install --save-dev @fortawesome/free-brands-svg-icons
npm install --save-dev @fortawesome/pro-light-svg-icons
npm install --save-dev @fortawesome/pro-regular-svg-icons
npm install --save-dev @fortawesome/pro-solid-svg-icons
npm install --save-dev @fortawesome/vue-fontawesome
Now go to the resources/assets/js/app.js and add the making sure it's below window.Vue = require('vue');.
// Add Font Awesome 5 pro
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fab, fal, far, fas);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Also open the one of your .vue files to add an example icon just to see it's working.
<font-awesome-icon :icon="['far', 'address-book']" />
<font-awesome-icon :icon="['fab', 'apple']" />
Now for this example I will build the production version to get a more realistic file size.
npm run production
Now straight away the compiling time goes up and also before you say it... the app.js file size goes up into the MB's because we are bringing in every single icon/svg.
/js/app.js 3.14 MB
/css/app.css 155 kB
So now lets limit the icons to just the ones we are using, so again back in the resources/assets/js/app.js file.
// Add font awesome 5 pro
import { library } from '@fortawesome/fontawesome-svg-core';
// Individual Icons
import { faApple } from '@fortawesome/free-brands-svg-icons';
import { faAddressBook } from '@fortawesome/pro-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faAddressBook, faApple);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Now when you run the file size will be back to normal.
npm run production
/js/app.js 395 kB
/css/app.css 155 kB
I hope this has been helpful.


me@grafxflow
Visitors also viewed these posts