Nuxt Fontawesome 5

February 20, 2020

NOTE: Seems like there is plan to migrate nuxt-fontawesome to @nuxtjs/fontawesome

Install

npm i nuxt-fontawesome

npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

If you are using the pro set

npm i @fortawesome/pro-regular-svg-icons

NOTE: Installing the Pro version of Font Awesome

Edit nuxt.config.js.

export default {
  modules: [
    'nuxt-fontawesome'
  ],
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/pro-regular-svg-icons',
        icons: ['faMapMarker'] // selectively import set to reduce size, use 'fas' to import entire set
      }
    ]
  },
}

Usage in components

<template>
  <div>
    <font-awesome-icon :icon="['far', 'map-marker']" />
  </div>
</template>

NOTE: Refer vue-fontawesome for more usage example.

References:

https://github.com/vaso2/nuxt-fontawesome

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Setup Algolia InstantSearch on Nuxt/Vue

Nuxt.js Component to Embed Twitter Tweet

Nuxt.js Add Markdown Pages

Nuxt.js dotenv Configuraton for Development and Production

Nuxt.js Install Vue.js Plugins (Universal SSR usage)

Simple Guide to Nuxt.js (Vue.js SSR)

Fontawesome 5 Pro Npm and Webpack Guide

Nuxt Fetch Show Loading

Nuxt Fetch Handle Error / Show Error Page