Catalin Vasile

I'm a design-focused engineer.

How to use FontAwesome 5 in Nuxt

1. Nuxt FontAwesome

Make sure to install the nuxt-fontawesome module for Nuxt.

yarn add nuxt-fontawesome

2. FontAwesome Icons

Install your preferred FontAwesome icon packages. You can stick to all, or just one.

yarn add @fortawesome/fontawesome @fortawesome/fontawesome-free-brands @fortawesome/fontawesome-free-solid

3. Setup Nuxt

Inside your nuxt.config.js file setup nuxt-fontawesome as a module.

    // ...

    modules: [
        ['nuxt-fontawesome', {
            component: 'fa',
            imports: [
              {
                set: '@fortawesome/free-solid-svg-icons',
                icons: ['faDollarSign']
              }
            ]
          }]
      ],

    // ...

The config above is using just a single icon and sets up the FontAwesome component name as fa. This means that inside your components you will be able to use the following FontAwesome component:

<fa :icon="['fas', 'dollar-sign']" />

If you’d like to access all icons (from the package that you have installed), make sure to edit your Nuxt config to use the nuxt-fontawesome as follows:

  // ...

  modules: [
      'nuxt-fontawesome'
    ],

  // ...

That’s it! You should now be able to use the FontAwesome component and programatically use icons inside your Nuxt-powered app.

Subscribe

Be the first to know when I publish a new article on the blog.

No spam. You can unsubscribe at any time.


Comments