Font awesome icons in buefy

Asked 24/9, 2018 at 17:19 Answered 5/4, 2020 at 15:5

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?

Menell answered 24/9, 2018 at 17:19 Comment(0)

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>

Chuff answered 5/4, 2020 at 15:5 Comment(0)

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

Austroasiatic answered 6/5, 2019 at 20:4 Comment(0)

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.

Monto answered 19/1, 2019 at 17:45 Comment(1)

this should be accepted answer, as it doesn't force user to create an additional layer of abstraction for fontawesome icons like creating separate/dedicated font-awesome-icon component! – Soldo 6/12, 2020 at 10:54

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>

Monto answered 19/1, 2019 at 20:57 Comment(0)

Recommended topics

Hot tags