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.

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:

    # install the beta package - using the @next flag
    npm i --save @fortawesome/[email protected]
    
    # install the beta package - using the @next flag
    yarn add @fortawesome/[email protected]
    

    Find out more about what's in Font Awesome core

    2. Add 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 Packages

    For Free icons, you can add either – or both – of these styles:

      # Free icons styles
      npm i --save @fortawesome/[email protected]
      npm i --save @fortawesome/[email protected]
      
      # Free icons styles
      yarn add @fortawesome/[email protected]
      yarn add @fortawesome/[email protected]
      

      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:

        # Pro icons styles
        npm i --save @fortawesome/[email protected]
        npm i --save @fortawesome/[email protected]
        npm i --save @fortawesome/[email protected]
        npm i --save @fortawesome/[email protected]
        npm i --save @fortawesome/[email protected]
        
        # Pro icons styles
        yarn add @fortawesome/[email protected]
        yarn add @fortawesome/[email protected]
        yarn add @fortawesome/[email protected]
        yarn add @fortawesome/[email protected]
        yarn add @fortawesome/[email protected]
        
        Advertisement

        3. Add the Vue Component

        And lastly, install the Font Awesome Vue component:

          npm i --save @fortawesome/[email protected]
          
          yarn add @fortawesome/[email protected]
          

          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!

          Learn more

          You're viewing the Version 6 Beta

          It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

          Get the Deets on Version 6

          Head Back to Our Current Version 5 Release

          Need a Hand?

          If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

          Or get Real Human Support™ with a Pro Subscription!