Font Awesome 5 as a component for Vue JS

Introduction

Have ever you installed this package?

@fortawesome/fontawesome-free

And imported those packages like this?

import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";

And somehow, used the icons like this?

<i class="fa fa-image"></i>

If you encountered the same problem where the icons are not updating dynamically using these packages, this one is for you.

Solution

Use Font Awesome 5 Vue component
Full documentation

Step 1: Install packages

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

As you can see, there are different FontAwesome packages available for use.

1. Solid
2. Regular
3. Brands

If you are a Subsriber of Font Awesome Pro, you can install these packages as well.

$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons

Step 2: Import

Go to your main js/ts file src/main.js or in my case, src/main.ts as an entry point file

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fab, fas, far);

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

This will allow you to use all the icons inside those packages. But the documentation says it's still better to import the icon you just need to use.

Usage

After you have successfully imported the packages you should now be able to use them in your Vue template files.

Solid icons: @fortawesome/free-solid-svg-icons

<font-awesome-icon :icon="['fas', 'image']" />
<font-awesome-icon :icon="['fas', 'user']" />

Regular icons: @fortawesome/free-regular-svg-icons

<font-awesome-icon :icon="['far', 'image']" />
<font-awesome-icon :icon="['far', 'user']" />

Branch icons:@fortawesome/free-brands-svg-icons

<font-awesome-icon :icon="['fab', 'twitter']" />

Extra

You can also specify the icon you just want to use.

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
import { faUser } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faTwitter, faUserAstronaut, faUser);

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Solid icons:

<font-awesome-icon icon="user-astronaut"/>

Regular and Brand icons should be implemented the same as the above

<font-awesome-icon :icon="['far', 'user']" />
<font-awesome-icon :icon="['fab', 'twitter']" />

The only difference is, you cannot use any icons aside from what icons are imported.

This codes should not show any icons on your page using specific icon imports

<font-awesome-icon :icon="['far', 'user-secret']"/>
<font-awesome-icon :icon="['fab', 'facebook']" />

For the full documentation of the installation just click this link

If you have questions, concerns, or additional about this topic, just send me a DM on my twitter.

Thank you! Happy coding!

Comments

[Alfredo Fernandez]

This doesn't work in vue3, please some recommendation maybe

[Karlo Dela Rosa]

Hey! Apologies for my late response. Anyway, thank you for your comment! I will try to find out how to make use of this in vue3. :)

[Hibrit Usta]

Thank you.

[Karlo Dela Rosa]

Glad it helps :)