Breaking News: Grepper is joining You.com. Read the official announcement!

nuxt 3 font awesome

a blushy boi answered on July 2, 2022 Popularity 9/10 Helpfulness 5/10

answer nuxt 3 font awesome

nuxt 3 font awesome

Comment

// STEP 1: Install @fortawesome/vue-fontawesome@latest-3 with npm or yarn

// npm i --save @fortawesome/vue-fontawesome@latest-3 @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome
// yarn add @fortawesome/vue-fontawesome@latest-3 @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

// STEP 2: Create a `plugins/fontawesome.js` file and copy paste this
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brand-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)
library.add(fab)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

// STEP 3: Add the Font Awesome CSS to your Nuxt config
// Note: you don't have to specify plugin as you would previously in Nuxt 2.

// nuxt.config.ts
export default defineNuxtConfig({
  // ...
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
  // ...
})

// And that's pretty much it!

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: fontawesome.com

Tags: font-awesome javascript nuxtjs

Link to this answer
Share Copy Link

Contributed on Jul 02 2022

a blushy boi

0 Answers Avg Quality 2/10

nuxt 3 font awesome

Contents

More Related Answers

nuxt 3 font awesome

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.