DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Font Awesome with VueJS 3
Sabbir Sobhani
Sabbir Sobhani

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

<i class="fad fa-laugh-wink"></i>
Enter fullscreen mode Exit fullscreen mode

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

Follow me on Twitter sabbirsobhani

Top comments (5)

Collapse
 
adamkdean profile image
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
Enter fullscreen mode Exit fullscreen mode

vs

dist/assets/index.ee0d013d.js                      82.16 KiB / gzip: 32.53 KiB
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sabbirsobhani profile image
Sabbir Sobhani Author

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.

Collapse
 
adamkdean profile image
Adam K Dean • Edited on

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)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
apmyp1990 profile image
apmyp1990

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

Collapse
 
runxc1 profile image
Info Comment hidden by post author - thread only accessible via permalink
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

Some comments have been hidden by the post's author - find out more

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs