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.jsinside your vuejs 3 project,/srcfolder.
//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
Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!
Note: This article was originally Posted on May 22, 2021. While the core concepts discussed here remain relevant, please be aware that the technology landscape is constantly evolving. Libraries, frameworks, and best practices may have changed since this article was written. For the most up-to-date information, consider checking the latest documentation or resources.
Top comments (5)
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
vs
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.
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.
Is it possible to use fa by unicode with vue? I have tried everything, but it won't work.
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