Use font-awesome in a Vue app created with vue-cli webpack

With the FontAwesome-5 release some exclusive things are done by FontAwesome team for vue and other libraries:

Kinda outdated solution but still works, check the updated solution below:

• Check fontawesome advance options here
• For npm package and doc check here

Anyhow, here is what I did to integrate it, first installed these packages:

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/fontawesome-free-solid

Create a file called fa.config.js and included this code:

import Vue from 'vue';
import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import {
  faSpinner,
  faAngleLeft,
  faAngleRight,
} from '@fortawesome/fontawesome-free-solid';

fontawesome.library.add(
  faSpinner,
  faAngleLeft,
  faAngleRight,
);

Vue.component('font-awesome-icon', FontAwesomeIcon); // registered globally

And import it in main.js

import './path/to/fa.config';

And in my components I am using it like this:

<template>
  <div>
    <font-awesome-icon icon="angle-left"></font-awesome-icon> Hey! FA Works
  </div>
</template>

By now you guys might have figured it out what's the advantage of doing as I have done it above?

Using an explicit icon offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

Hope this helps!

---

UPDATE - Friday, 22 June 2018
The above solution still works but now things are done in different way, first install these packages:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons // if "regular" icon package needed
npm i --save @fortawesome/vue-fontawesome

Then create a file called fa.config.js and included this code:

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faUser, faBuilding } from '@fortawesome/free-solid-svg-icons'
import { faUserCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  faUser,
  faBuilding,
  faUserCircle,
  faCheckCircle,
);

Vue.component('font-awesome-icon', FontAwesomeIcon); // registered globally

Say that you like you use faUser icon of both the kind regular and solid, then do this change:

import { faUser as fasUser, faBuilding } from '@fortawesome/free-solid-svg-icons'
import { faUser as farUser, faCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  fasUser,
  farUser,
  faBuilding,
  faCheckCircle,
);

And import it in main.js

import './path/to/fa.config';

And in my components I am using it like this:

<template>
  <div>
    <font-awesome-icon icon="user"></font-awesome-icon>

    // If you like to use Font Awesome Regular, then:
    <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
    <font-awesome-icon :icon="['far', 'check-circle']"></font-awesome-icon>

  </div>
</template>

It seems you need to include a loader for .css in your webpack configuration:

  {
    test: /\.css$/,
    loader: 'css-loader'
  },