Menambahkan Font Awesome di Nuxt JS

August 14, 2021 1 min read
Cara menambahkan Font Awesome di project Nuxt JS

Font awesome menjadi salah satu library font populer untuk mempermudah menambahkan font di aplikasi atau website.

Kita juga bisa menambahkan font awesome ke dalam aplikasi atau situs web Nuxt JS kita menggunakan modul @nuxtjs/fontawesome .

Berikut langkah-langkahnya.

Menambahkan Font Awesome di Nuxt JS

Install Paket yang Dibutuhkan

Instal paket yang dibutuhkan melalui npm.

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

Tambahkan Modul ke Dalam nuxt.config.js

Selanjutnya tambahkan modul font awesome ke bagian buildModules di dalam nuxt.config.js.

export default {
  buildModules: [
    '@nuxtjs/fontawesome',
  ],

  fontawesome: {
    icons: [
      regular: ["faEnvelope"],
      brands: [
        "faFacebook",
        "faFacebookF",
        "faFacebookMessenger",
        "faInstagram",
        "faTwitter",
        "faWhatsapp",
        "faPinterest",
        "faTelegramPlane"
      ]
    ]
  }
}

Gunakan Font Awesome di Komponen

Terakhir tinggal kita gunakan font awesome ke dalam komponen yang kita inginkan.

<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>


Terima kasih sudah membaca artikel "Menambahkan Font Awesome di Nuxt JS"
Bagikan
Silahkan Login untuk berkomentar.