When using Font Awesome with Vue.js, you can put our official vue-fontawesome component to work to make everything just right.

Advertisement

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.

npm, yarn, & pnpm

In our examples we are going to use npm i to indicate package installation for simplicity's sake. If you are using yarn or pnpm we'll assume you can figure out the correct command for those managers.

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:

npm i --save @fortawesome/fontawesome-svg-core

Find out more about what's in Font Awesome core

2. Add Icon Packages

Advertisement

Next, you'll install the icons you want to use -- you can choose a Kit Package or SVG Icon Packages, and select any of our styles.

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
Get a Pro Plan, replace KIT_CODE with a Kit token
npm i --save @awesome.me/kit-KIT_CODE
# You probably don't need all of these, just pick what you need
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons
npm i --save @fortawesome/sharp-thin-svg-icons
# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

3. Add the Vue Component

Advertisement

And lastly, install the Font Awesome Vue component:

Using Vue 3 or Vue 2?

How you install our vue-fontawesome component will be different depending on your version of Vue. Make sure to only install the appropriate one.

npm i --save @fortawesome/vue-fontawesome@latest-3
npm i --save @fortawesome/vue-fontawesome@latest-2

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!