When using Font Awesome with Vue.js, you can put our official
vue-fontawesomecomponent to work to make everything just right.
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.
First you'll need to use npm or yarn to install the core package which includes all the utilities to make the icons work:
Next, you'll install the icons you want to use - you can choose Free or Pro icons, and select any of our styles.
For Free icons, you can add either – or both – of these styles:
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:
And lastly, install the Font Awesome Vue component:Add Some Icons!