You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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', ...]
}
}
}
Use b-icon as usually
<b-icon icon="check" /> // pack "fas" is the default
<b-icon icon="cc-visa" pack="fab" />
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.
@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
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:
All my buefy configs resides at the nuxt.config.js file. The options that matters to us are:
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:
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
The text was updated successfully, but these errors were encountered: