about uscontact

How to use Font Awesome in NuxtJS

Category:
Author: zemna
Date: April 18, 2021
Share this:

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>
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu