Font awesome icons в buefy

Я пытаюсь переключить свой проект с bulma + jQuery на buefy. Я загружаю buefy, vue и font awesome с компакт-диска. ([email protected], [email protected], отличный шрифт 5.2.0). Основная проблема у меня с иконками. В моем проекте используются отличные шрифтовые иконки. И по умолчанию buefy iconPack - это материальный дизайн. Он должен поддерживать отличный шрифт. Я попытался изменить набор значков по умолчанию, но ничего не сделал:

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

то же ничего:

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

Поэтому мне нужно явно указать пакет значков для каждого значка.

Вторая проблема заключается в том, что даже в этом случае buefy добавляет fa-lg, которые мне совсем не нужны. Например, для компонента b-tab-item

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

Он отображает:

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

Можно ли изменить это поведение?


vue.js buefy font-awesome
person Роман Коптев    schedule 24.09.2018    source источник

Ответы (4)


arrow_upward
14
arrow_downward

всем, кто все еще может с этим бороться. мои проблемы были решены с помощью этого в моем 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: ""
    }
  }
});

обязательно установите все зависимости, используя npm:

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

то вы можете использовать его в своих компонентах следующим образом:

<b-icon
  pack="fas"
  icon="user"
  size="is-large"
  type="is-success"></b-icon>
person Moher    schedule 05.04.2020
comment
Спасибо !!! Это было супер полезно! - person Fer Martin; 15.12.2020

arrow_upward
6
arrow_downward

Это рабочий код для меня в buefy

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

и в index.html

разместить в заголовке тега

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

сначала убедитесь, что вы добавили пакет npm fortawesome

person Amir Khadem    schedule 06.05.2019

arrow_upward
3
arrow_downward

Если вы запустите:

yarn add @fortawesome/fontawesome-free

А затем импортируйте:

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

Тогда он должен работать. Импорт из CDN не работает.

person Ross Coundon    schedule 19.01.2019
comment
это должен быть принятый ответ, так как он не заставляет пользователя создавать дополнительный уровень абстракции для значков fontawesome, таких как создание отдельного / выделенного компонента font-awesome-icon! - person lukaszkups; 06.12.2020

arrow_upward
1
arrow_downward

В дополнение к исходному ответу. Это рабочий код для меня, использующего 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>

  <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>
person Ross Coundon    schedule 19.01.2019