How to add Font Awesome to Nuxt

If you just want to add usual Font Awesome icons, then the official tutorials in Font Awesome is suffice. However, if you want to add special icons, such as brands like Instagram, then you would need to add a few more lines to the files. Here I use Nuxt 2 as an example.

---

First, install the core package

Bring in Font Awesome

To get started, install the core package and vue-fontawesome component.

// for Nuxt 2
npm i --save @fortawesome/vue-fontawesome@latest-2 @fortawesome/fontawesome-svg-core 

Create file in plugins folder

Then, create a fontawesome.js file in plugins folder

// For Nuxt 2
import Vue from 'vue'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

// This is important, we are going to let Nuxt.js worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)

// Register the component globally
Vue.component('font-awesome-icon', FontAwesomeIcon)

Modify nuxt.config.js

Add the paths to 'css' and 'plugins' sections under nuxt.config.js.

// Modify nuxt.config.js adding to the `css` and `plugins` sections.
css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
]

plugins: [
  '~/plugins/fontawesome.js'
]

Add icons

Finally, add icons with the syntax provided by Font Awesome to the template area.

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>

---

Second, add extra icon packages for brand icons

Install brand icon packages

npm install --save @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Bring in the brand library

Inside fontawesome.js, add the library corresponding to the brand icons.

...
library.add(fab)
...

Add the brand icons

Finally, we can add the brand icons to the template.

<template>
  <div>
    <font-awesome-icon icon="fab fa-instagram" />
  </div>
</template>