How to make fontawesome works

[lucraraujo]

This is not a bug. It is a request to improve the documentation. I found a way to make font-awesome work in nuxt. The packages I have installed are:

"@fortawesome/fontawesome-free": "^5.13.0",
"nuxt-buefy": "^0.3.26"

All my buefy configs resides at the nuxt.config.js file. The options that matters to us are:

defaultIconPack: 'fas'
materialDesignIcons: false,

The aditional option that must be set (not a buefy option) is the css for the font-awesome. In the nuxt config file you will find a css option. There you will add the entry:

@fortawesome/fontawesome-free/css/all.css

if you want to use the CSS already processed, or:

'@fortawesome/fontawesome-free/scss/fontawesome.scss',
'@fortawesome/fontawesome-free/scss/solid.scss'

if you want to use the SASS pre-processor There is an option if you want to use less, just check the files at the dependency.

With those settings, I'm able to, for example, use the tag

<b-icon icon="user" />

[fabiofdsantos]

I'm not sure if @jtommy suggests another approach but I did the following steps to use both materialDesignIcons and fontAwesome:

1- Install nuxt-community/fontawesome-module: npm install @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D

2- Define the icons you want to use:

fontawesome: {
    component: 'Fa',
    suffix: true,
    icons: {
      brands: ['faCcVisa'],
    },
  },

3- Include them in the <template>: <fa-icon :icon="['fab', 'cc-visa']" />

[dappiu]

I'm using a method similar to @fabiofdsantos, but if you want to actually use @nuxtjs/fontawesome I think you should set 'FontAwesomeIcon' as the Buefy defaultIconComponent. This is my working minimal configuration.

1. Install packages yarn add -D @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

2. Activate @nuxtjs/fontawesome module and set fontawesome and buefy options accordingly

   // nuxt.config.js
   export default {
   // ...
   modules: [
   'nuxt-buefy'
   ],
   buildModules: [
   '@nuxtjs/fontawesome`
   ],
   buefy: {
   defaultIconPack: 'fas',
   defaultIconComponent: 'FontAwesomeIcon',
   materialDesignIcons: false
   },
   fontawesome: {
   icons: {
     // solid: true,  // include the full pack in the bundle, not recommended
     solid: ['faCheck', 'faCog', ...],  // include only icons required by your project
     brands: ['faCcVisa', ...]
   }
   }
   }

3. Use b-icon as usually

   
   <b-icon icon="check" />  // pack "fas" is the default

This is working for me and let me use the SVG icons including in the bundle only those listed in the fontawesome.icons property. The CSS and the icon files are automatically included by `@nuxtjs/fontawesome`.

[wesdevpro]

@lucraraujo @fabiofdsantos @dappiu I would love to work out which method would be the best practice for setting up nuxt-buefy with Font Awesome. Let me know which one of the three mentioned you guys think would be most optimal for the docs. On a side note, have you guys found any issues on mobile phones (in particular Iphone's in safari) with these setups? I believe Buefy out of the box has been having issues with Font Awesome