When using Font Awesome with Vue.js, use our official
vue-fontawesomecomponent to make everything work just right.
When using Font Awesome with Vue.js, we recommend using 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.
# Set up
# Add (Beta) 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:
# Add (Beta) Icon Packages
Next, you'll install the icons you want to use - you can choose Free or Pro icons, and select any of our styles.
# Free Icon Pakcages
For Free icons, you can add either - or both - of these styles:
# Pro Icon Pakcages
For Pro icons, you'll first need to set up access with your secret Font Awesome npm token and global or per-project access.Configure Access for Pro
Then add the Pro icon style packages that you plan to use in your app:
# Add the Vue Component
And lastly, install the Font Awesome Vue component: