Install and use Font Awesome in Nuxt.js

In this article you will learn how to install Font Awesome in Nuxt.js.

This is all very easy and can be done in three steps.

Step 1

In this step you need to install 3 packages.

Do the Nuxt Fontawesome first.


npm i nuxt-fontawesome

Then you need to install the packages which contains the free icons.


npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Step 2

Next step is to add Fontawesome to your nuxt.config.js Build section, like this:


modules: [

[

'nuxt-fontawesome',

{

component:  'fa',

imports: [

//import whole set

{

set:  '@fortawesome/free-solid-svg-icons',

icons: ['fas'],

},

{

set:  '@fortawesome/free-brands-svg-icons',

icons: ['fab'],

},

],

},

],

],

Step 3

To start using them do this:



fa  :icon="['fab',  'facebook-square']" />
fa  :icon="['fas',  'check-circle']" />

fa is the component name we used in nuxt.config.js, it can be anything you set it to. Then we specify which type of icon, fas or fab, then the icon name.

You can easily edit the look of your icon by applying styling with color or size.

That's it, you have now access to Font Awesome free icons.