DEV Community

Cover image for How to install font awesome icons to Nuxt Js - V2
Dr. Bash
Dr. Bash

Posted on

How to install font awesome icons to Nuxt Js - V2

#vue #nuxt

Hi Developers

** Step 1.**

Install these packages.

yarn add @nuxtjs/fontawesome -D
Enter fullscreen mode Exit fullscreen mode

then add free sets of icons

yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D
Enter fullscreen mode Exit fullscreen mode

Step 2.

Add font awesome to nuxt.config.js file

// nuxt.config.js

  buildModules:  [
     '@nuxtjs/fontawesome',
  ],
Enter fullscreen mode Exit fullscreen mode

Step 3.

Add this configuration

fontawesome: {
     component: 'Fa',
     suffix: false,
     icons: {
       solid: true,
       brands: true,
     },
 },
Enter fullscreen mode Exit fullscreen mode

Step 4

How to use them in .vue file

<fa :icon="['fas', 'adjust']" />
Enter fullscreen mode Exit fullscreen mode

...
Check the video link -> Install Font awesome icons to Nuxt 2

Bye bye Developers

Top comments (0)

Read next

sucodelarangela profile image

Vue3: directives β€” cheat sheet (built-in and custom) (en)

Angela Caldas -

stefanobartoletti profile image

Nuxt Social Share has a new home!

Stefano Bartoletti -

aliahsan0 profile image

Angular vs. React vs. Vue: Which is the Best Framework in 2024?

Ali Ahsan -

ahmetilhn profile image

Prevents re-execution of large javascript functions that have been processed once with the same parameter.

Ahmet Δ°lhan -