How to use Font Awesome in NuxtJS

We can easily use Font Awesome icons in your NuxtJS project using @nuxtjs/fontawesome package.

Install required packages from npm

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

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

export default {
  buildModules: [
    '@nuxtjs/fontawesome',
  ],
  fontawesome: {
    icons: [
      regular: ["faEnvelope"],
      brands: [
        "faFacebook",
        "faFacebookF",
        "faFacebookMessenger",
        "faInstagram",
        "faTwitter",
        "faWhatsapp",
        "faPinterest",
        "faTelegramPlane"
      ]
    ]
  }
}

Use <font-awesome-icon> vue component in your vue file

 <template>
  <footer>
    <a href="https://github.com/zemna" target="_blank"><font-awesome-icon :icon="['fab', 'github']" class="fa-2x" /></a>
    <a href="https://www.facebook.com/zemnanet" target="_blank"><font-awesome-icon :icon="['fab', 'facebook']" class="fa-2x" /></a>
    <a href="https://www.instagram.com/zemna/" target="_blank"><font-awesome-icon :icon="['fab', 'instagram']" class="fa-2x" /></a>
    <a href="https://twitter.com/zemna" target="_blank"><font-awesome-icon :icon="['fab', 'twitter']" class="fa-2x" /></a>
  </footer>
</template>