When using Font Awesome with Vue.js, you can put our official
vue-fontawesome component to work to make everything just right.
Advertisement Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 7,864 icons in Font Awesome 5 Classic styles of every icon 3 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Before You Get Started
Make sure you:
We recommend the official
vue-fontawesome component (described below), which uses the SVG + JS method to render icons. But you can opt to use the Web Fonts with CSS method if you prefer.
We’ll cover the basics of installing core utility packages, icon installation, and installing the Vue component, so that you can make awesome stuff your way!
Follow the steps below to set up the
vue-fontawesome component in your project.
1. Add SVG Core
First you'll need to use npm or yarn to
install the core package which includes all the utilities to make the icons work:
Find out more about what's in Font Awesome core 2. Add Icon Packages
install the icons you want to use - you can choose Free or Pro icons, and select any of our styles. Free Icon Packages
For Free icons, you can add any or all of the following styles:
Pro Icon Packages
You'll first need to set up access with your secret Font Awesome npm token and global or per-project access to use Pro icons.
Configure Access for Pro
Then add the Pro icon style packages that you plan to use in your app:
3. Add the Vue Component
install the Font Awesome Vue component:
Using Vue 2 or Vue 3?
How you install our
vue-fontawesome component will be different depending on whether you are using Vue 2 or Vue 3.
Make sure to only install the appropriate one that matches the version of Vue you are using.
You're Ready to Add Icons!
Like Anakin said, it’s woooorking! All of our
icons are now ready to do your project’s bidding. Learn how to add them to your Vue project and then use their power to bring order and style to your UI! Add Some Icons!