Font Awesome with VueJS 3

version 5

Font Awesome is a great tool for working with various of icons. It is the most popular and widely using icon toolkit. In a VueJS 3 CLI project you can easily add Font Awesome library by following these easy steps:

install fontawesome packeges from npm

install all of them one by one

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
npm i --save @fortawesome/vue-fontawesome@prerelease

5 no is for Vue version 3 only
6 no is for Vue 3++ version, also work with Vite

install 5 or 6, not both

import in main.js

You can find main.js inside your vuejs 3 project, /src folder.

//vue-app/src/main.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch();

const app = createApp(App);

app.component("font-awesome-icon", FontAwesomeIcon);

// add necessary dependencies...

app.mount("#app");

Thats it! now you can use font awesome icon in your VueJS 3 project!

<i class="fad fa-laugh-wink"></i>

if there any problem popup, don't forget to ask me!

Follow me on Twitter sabbirsobhani

Comments

[Adam K Dean]

It seems to me that adding all these to the library is massively inflating the chunk size and actually worse than using the CDN CSS direct

dist/assets/index.5c3617d6.js                      1878.35 KiB / gzip: 678.00 KiB

vs

dist/assets/index.ee0d013d.js                      82.16 KiB / gzip: 32.53 KiB

[Sabbir Sobhani]

Actually, when I wrote this article I did not find any good way to implement font awesome with vue. I don't use vue now, but if you have better idea/docs you can share. Thank you.

[Adam K Dean]

The way I've used it is very similar to you, except I extract the icons I use and only add them. Your article was still helpful so thank you for that, just required a little tweak as below and now the chunks are much smaller.

import { library } from '@fortawesome/fontawesome-svg-core'
import { faBell, faLock, faWarning } from '@fortawesome/free-solid-svg-icons'
library.add(faBell, faLock, faWarning)

[apmyp1990]

Is it possible to use fa by unicode with vue? I have tried everything, but it won't work.

[runxc1(Bret Ferrier)]

As a note to others this is not the recommended way to use Font awesome with Vue3 as the core library will modify the dom directly and cause rendering errors