Font awesome icons in buefy

6
votes

I'm trying to switch my project from bulma + jQuery to buefy. I load buefy, vue and font awesome from a cdn. ([email protected], [email protected], font awesome 5.2.0). The main problem I have with icons. My project uses font awesome icons. And default buefy iconPack is material design. It must support font awesome. I've tried to change the default icon pack, but that does nothing:

Vue.use(Buefy.default, {
    defaultIconPack: 'fas',
});

the same nothing:

Vue.use(Buefy, {
    defaultIconPack: 'fas',
});

So I need to point the iconpack explicitly for every icon.

The second problem is that even in this case buefy adds fa-lg that I don't need at all. For example for b-tab-item component

<b-tab-item label="Similarity" icon="search" icon-pack="fas"></b-tab-item>

It renders:

<i class="fas fa fa-search fa-lg"></i>

Is it possible to change this buefy behaviour?

4
vue.jsfont-awesomebuefy

4 Answers

14
votes

to anyone that may still struggle with this. my problems was solved by using this in my main.js:

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

import { library } from '@fortawesome/fontawesome-svg-core';
// internal icons
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(fas);
Vue.component('vue-fontawesome', FontAwesomeIcon);


Vue.use(Buefy, {
  defaultIconComponent: "vue-fontawesome",
  defaultIconPack: "fas",
  customIconPacks: {
    fas: {
      sizes: {
        default: "lg",
        "is-small": "1x",
        "is-medium": "2x",
        "is-large": "3x"
      },
      iconPrefix: ""
    }
  }
});

make sure to install all the dependencies using npm:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

then you can use it in your components as follows:

<b-icon
  pack="fas"
  icon="user"
  size="is-large"
  type="is-success"></b-icon>
6
votes

This is working code for me in buefy

in main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(Buefy, { defaultIconPack: 'fas' })

and in index.html

place in head tag

<link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />

make sure first off you add the fortawesome npm package

3
votes

If you run:

yarn add @fortawesome/fontawesome-free

And then import:

import '../node_modules/@fortawesome/fontawesome-free/js/all.js'

It should then work. Importing from a CDN doesn't seem to work.

1
votes

Further to original answer. This is working code for me using a CDN:

main.js

import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy';
import 'buefy/dist/buefy.css'

Vue.use(Buefy, {
  defaultIconPack: 'fas'
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

template

<template>

  <div class="container">
    <b-tabs
      is-boxed>
        <b-tab-item label="Search" icon="search"></b-tab-item>
        <b-tab-item label="Music" icon="music"></b-tab-item>
        <b-tab-item label="Videos" icon="video"></b-tab-item>
    </b-tabs>
  </div>
</template>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>buefy-test</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but buefy-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>