'How to add Font Awesome to Vue and Nuxt.js project?

I was trying like add as following..

css: [ '@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css' ],

But it showing as image like enter image description here

vue.jsnuxtjs


Solution 1:[1]

you can import the css from cdn/local in your component / layout

<style scoped>
@import 'https://pro.fontawesome.com/releases/v5.10.0/css/all.css';
// or 
@import '@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css';
</style>

or you in you nuxt.config.js (documentation)

export default {
  css: [
    '~/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css'
  ]
}

i would suggest using @fortawesome/vue-fontawesome you can take advantage of the tree shaking

Solution 2:[2]

First add the dependency to your project using npm

npm i @nuxtjs/fontawesome

or if you are using yarn

yarn add @nuxtjs/fontawesome

then add this to your nuxt.config.js file under buildModules

buildModules:['@nuxtjs/fontawesome']

Next inside the nuxt.config file add an option for configuring fontawesome. Stating the icons you want to use. For my case I usually add these below

fontawesome: {
 icons:{
  solid:true,
  brands:true
 }
}

and now you are ready to use your icons in any nuxt component or page use it like this

<font-awesome-icon :icon="['fas', 'home']"/>

that's all.

Solution 3:[3]

You could globally load the script dependency from the head or body (before body end tag), in your nuxt.config.js file. Example:

export default {
  head: {
    ...
    script: [{src: 'https://kit.fontawesome.com/[user].js', async: true, crossorigin: 'anonymous'},]
  },

The above will generate in your HTML:

<head>    
  <script src="https://kit.fontawesome.com/[user].js" async crossorigin="anonymous"></script>
</head>

In the same way for CSS:

export default {
  head: {
    ...
    link: [{rel:"stylesheet", href:"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"},]
  },

For version 5 of the library, it asks you to register with a user, so the link it generates to load it, contains the user you created ([user]).

Note: be careful which version you use, because a class you are calling may not exist in the version you load.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3

Related Questions