[英]Font awesome icons in buefy
I'm trying to switch my project from bulma + jQuery to buefy .我正在尝试将我的项目从bulma + jQuery切换到buefy 。 I load buefy , vue and font awesome from a cdn.
我从 CDN 加载了buefy 、 vue和font awesome 。 (buefy@0.6.7, vue@2.5.17, font awesome 5.2.0) .
(buefy@0.6.7, vue@2.5.17, 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.
并且默认的 buefy iconPack 是 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.第二个问题是,即使在这种情况下,buefy 也会添加我根本不需要的
fa-lg
。 For example for b-tab-item component例如对于 b-tab-item 组件
<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?是否有可能改变这种笨拙的行为?
to anyone that may still struggle with this.对于任何可能仍在为此挣扎的人。 my problems was solved by using this in my
main.js
:通过在我的
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
安装所有依赖项:
$ 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>
This is working code for me in buefy这是在 buefy 中对我有用的代码
in main.js在 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并在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确保首先添加fortawesome npm 包
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.
从 CDN 导入似乎不起作用。
Further to original answer.进一步原始答案。 This is working code for me using a CDN:
这是我使用 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索引.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.