Question

我正在尝试将项目从 bulma + jQuery 切换到 buefy 。我从CDN加载了 bufy ， vue 和 font awesome 。 （buefy @ 0.6.7，vue @ 2.5.17，超赞的字体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>

有可能改变这种贪婪的行为吗？

Answer 1

向可能仍对此感到困扰的任何人。通过在我的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>

Answer 2

如果您运行：

yarn add @fortawesome/fontawesome-free

然后导入：

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

然后应该可以工作。从CDN导入似乎无效。

Answer 3

进一步了解原始答案。这是我使用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>

Answer 4

这对我来说是可行的代码

在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"
    />

确保首先添加fortawesome npm软件包

在buefy中的字体真棒图标

4 个答案: