Using Font Awesome icons with Buefy for beautiful designs

Currently, I am in the process of transitioning my project from utilizing bulma + jQuery to buefy. The resources I am loading include buefy, vue, and font awesome from a CDN. However, despite specifying the defaultIconPack as 'fas' for font awesome, the icons are not displaying correctly. It seems that buefy still adds unnecessary classes like fa-lg which is causing issues with icon rendering. For instance, when using the b-tab-item component:

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

The resulting HTML includes unnecessary classes:

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

I have attempted to adjust the defaultIconPack setting without success. Is there a way to modify this behavior in buefy?

vue.jsfont-awesomebuefy

Answer №1

For those who are still facing challenges with this, I found a solution by incorporating the following code snippet 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: ""
    }
  }
});

Ensure to install all necessary dependencies using npm:

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

After installation, you can incorporate it into your components like so:

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

Answer №2

This code snippet is what I'm using successfully with buefy

within main.js file:

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' })

also, in index.html file:

place this within the head tag

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

it's important to first install the fortawesome npm package

Answer №3

When you execute:

yarn add @fortawesome/fontawesome-free

Afterwards, ensure to import:

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

This should resolve the issue. Attempting to import from a CDN has proven to be ineffective.

Answer №4

Expanding on the initial response. Here is functional code that incorporates the use of 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The unique Phanto application design implemented in a Vue CLI3 project using Vuetify framework

I have recently started a vuetify project using Vue CLI3. It seems that the styling of my body fonts is being overridden by a mysterious class called .application. Despite my efforts, I cannot locate this class anywhere in the framework code. In additio ...

vue.jsvuetify.js

Guide to activating a watcher once the page finishes loading

One of my challenges involves a watcher calling a method: watch: { 'list.items' (n, o) { this.doSomething() } } Every time the page loads, new values are added to list.items like this: methods: { fetchLists(){ axios.get('/ ...

vue.jsvuejs2

Exploring Nuxt.js: A guide to server-side caching of axios calls for universal client access

I am currently working on a project using Vue and Nuxt.js. I am wondering if there is a way to cache an axios web service call for all clients. Specifically, I need to retrieve currency reference data and it seems inefficient for every client to make this ...

vue.jscachingaxiosnuxt.js

How can you implement a bootstrap navigation bar in a vue.js project?

I have encountered a problem with using html in my vue project. Despite following the documentation, it seems that the html is not working properly. I am unsure if this issue could be related to the import of popper.js. I have checked my code and I believe ...

javascriptvue.jsbootstrap-5popper.js

The combination of VueJS and Webpack Dev Server is having trouble hot reloading URL subpaths

My application operates within the subdirectory http://localhost:8080/admin_suffix The variable suffix is an ENV variable that I can modify and define in a .env file. After starting the webpack dev server, accessing http://localhost:8080/admin_suffix fun ...

vue.jswebpackwebpack-dev-server

Is Google able to identify elements that are concealed behind a v-if directive?

Just had a quick question regarding the v-if function: Does Google still recognize blocks that are "hidden" using v-if? We have certain elements that only appear after a user clicks a specific button or performs certain actions, but the content within thos ...

vue.jsnuxt.jsvuejs3nuxtjs3

What is the best way to anticipate the vue.js created hook?

I have a vue.js application where I am facing an issue with awaiting a call to the Prismic API. The call is initiated from the created hook, but I am unsure of how to make Vue await the hook itself. Here is an example of the code: ... async created() { ...

vue.jsasync-await

A peculiar outcome arises when running a Vue.js project folder on MacOS using the Vite development server

While working on a MacOS system, I encountered an issue when copying the entire directory of a vue.js 3 project using the command: cp -rp dir1 dir2. Subsequently, when attempting to run a development server in the copied directory (dir2) with the command: ...

vue.jsvite

Using Vue Formulate to effortlessly upload multiple images

One of my projects involves using a Vue Formulate component for uploading multiple images to an Express.js backend. Here is the code snippet for the Vue Formulate component: <FormulateInput type="image" name="property_ ...

javascriptvue.jsvue-formulate

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

In order to make an API request, I need to retrieve the id. However, whenever I try to include <a v-on:click="showRecipe({{inf.Id}})">Recipe</a> in my code, the entire page crashes. Removing this line resolves the issue. How can I pass the id ...

javascripthtmlvue.jsvuejs2vue-component

Activate a tooltip in Vuetify

I'm utilizing vuetify and have implemented a tooltip feature on a button. However, I do not want the tooltip to be displayed on hover or click; instead, I would like it to appear when a specific event is triggered. translate.vue <v-tooltip v-model ...

javascriptvue.jsvuetify.js

What are the possibilities of utilizing a variable that is stated within composition to enable dynamic rendering?

I'm working on a Vue.js v3 project using the composition API. I have defined a variable in my setup like this: setup() { const showInvoiceItemForm = true; return { showInvoiceItemForm }; }, Now, I want to show a form when a button is click ...

javascriptvue.jsvuejs3

Tips for enabling editing on the result column by clicking the edit button

Each time I click on the Edit button, I want to be able to change the output in the column {{ test.result }} by turning it into an input element. This will allow me to update the numbers and then save them. Attached is a screenshot showing how the column ...

vue.jsbootstrap-4vuejs2pug

Performing Vue CLI Global Upgrade

Struggling to create a new Vue.js project using the Vue CLI service, I encountered an error. With @vue/cli-service 3.0.0-beta.7 installed (confirmed by running vue -V), attempting to start a new project triggered the following error: ...

javascriptnpmvue.jsvuejs2

Is it considered proper to initialize an empty array within the data object of a Vue.js component?

For my component, I am in need of multiple empty arrays and predefined objects. The data object structure provided below seems to be effective for my purpose. However, I am uncertain if this is the optimal pattern and whether it might lead to unforeseen co ...

javascriptvue.jsvue-component

Is it possible to send a request to a Spring Boot Admin server from a specialized interface?

As I endeavor to integrate a custom view featuring administrative utilities into Spring Boot Admin, I am faced with the challenge of invoking calls to the server. My plan involves implementing these endpoints within Springboot Admin and then accessing them ...

vue.jsspring-boot-admin

Component fails to update when attribute is modified

My issue is that the crud-table component does not refresh when I change currentTable. It works when I assign currentTable = 'doctor' in the created() hook, but not here. Why is that? <template> <div id="adminpanel"> <div id ...

javascriptvue.jsfrontend

Cannot iterate over array using v-for - The property or method "dailyData" is not defined in the instance but referenced during rendering

I need help with displaying daily weather data in a table <tr :v-for="dailyData in weatherData.daily"> <td>{{ dailyData }}</td> </tr> The weatherData variable is a data property that contains the necessary information. ...

vue.jsvuejs2

Problem with Vue.js dropdown functionality in Internet Explorer

After developing a form using Vue.js to allow users to save and return to their answers, I encountered an issue in Internet Explorer. When the page loads, the dropdown menu tied to a computed property does not display the previously selected answer as expe ...

javascriptvue.jsinternet-explorer

Can you provide a guide on setting up and utilizing mathlive within NuxtJS?

Can anyone assist me? I am trying to figure out why my code is not working or if I have implemented it incorrectly. I used npm i mathlive to obtain input. However, following the instructions for implementing nuxt plugins in the documentation has not yield ...

javascripttypescriptvue.jsnpmnuxt.js