Font Awesome integration with nuxt.js

30 May 2020 — Written by Mitesh Patel

Font Awesome is a gret libary for icons, It provide a lot of icons free for site. svg icons are easy to use with any theme.

In this article, we’ll go through the process of integratin Font Awesome icons in a Nuxt.js application. A package that we are going to use is available here -

Install all the required packages:

npm install -D @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Now, Add @nuxtjs/fontawesome to buildModules in your nuxt.config.js

buildModules: [
    // Doc:

And add the configuration as follow.

fontawesome: {
  component: 'fa',
  suffix: true,
  icons: {
    solid: true,
    brands: [

component key in is used to rename component name, Here we're renaming it to fa and suffix means if we want to add suffixes or not like -icon, -layers etc..

add all the fonts that we want to include to avoid any unnnecessary imports. and in the component file we can use it as,

// If suffix is true,
<fa-icon :icon="['fab', 'facebook']" />

// Otherwise
<fa :icon="['fab', 'facebook']" />

Here fab is for font awesome brands icons, for solid icon we have to use fas.


Copyright © 2022 Mitesh Patel. Built with Gatsby