Шрифт потрясающие иконки в buefy - PullRequest
Новая
       7

Шрифт потрясающие иконки в buefy

0 голосов
/ 24 сентября 2018

Я пытаюсь переключить свой проект с bulma + jQuery на buefy .Я загружаю buefy , vue и шрифт потрясающий из CDN. (buefy@0.6.7, vue@2.5.17, шрифт awesome 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>

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

Ответы [ 3 ]

0 голосов
/ 19 января 2019

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

Это рабочий код для меня в 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

0 голосов
/ 19 января 2019

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

yarn add @fortawesome/fontawesome-free

, а затем выполните импорт: 

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

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

...