Как включить bootstrap - vue иконки в nuxt js? Проблема с навигационной стрелкой вниз - PullRequest
0 голосов
/ 05 апреля 2020

Редактировать: хм, может быть переопределение стиля -
Я могу взять выпадающий список ниже, который работает. И воткните его в область навигации, и стрелка вниз исчезнет. То же самое можно сказать и для выпадающего списка «lang», если я переместу его в тело, появится стрелка ..

РЕДАКТИРОВАТЬ: FML - это было переопределение стилей другой навигационной панели, ИСПОЛЬЗУЙТЕ SCOPE LOL

Navbar svg downarrows не будет отображаться. Большинство других значков работают просто отлично. Приведенный ниже код в значительной степени скопирован и вставлен для bootstrap vue exampe ..

<b-navbar toggleable="lg" type="dark" >
    <b-navbar-brand href="#"><img src="" class="d-inline-block align-top" width="220" height="45"></b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#"></b-nav-item>
        <b-nav-item href="#">Home</b-nav-item>
        <b-nav-item href="#">Contact Us</b-nav-item>
        <b-nav-item href="#">FAQ</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown  text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>Welcome, Friend</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

Некоторые значки работают, другие не работают. Ошибки не выбрасываются .

В документации сказано, что они не установлены по умолчанию ... поэтому я установил их с
https://icons.getbootstrap.com/#install
https://bootstrap-vue.js.org/docs/icons/

npm i bootstrap-icons

Я создал плагин, включающий nuxt.config. js.
Кажется, что все элементы работают правильно, но значки ..

 plugins: [
  '@/plugins/bootstrap-vue.js'
  ,'@/plugins/mixins/user.js'
],

/ plugins / bootstrap. vue. js ниже

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

I также попытался включить их специально

import {BootstrapVue,BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'
Vue.use(BootstrapVue)
import { BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVueIcons)[![enter image description here][1]][1]
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

1) Я не вижу связанных с иконками в папке node_modules / bootstrap.
2) Я вижу bootstrap. vue -icon. * В папке node_modules / bootstrap - vue. Он содержит как -icons.common. js, -icons. css.


Я также пытался добавлять значки непосредственно к элементу, как ..

<b-nav-item-dropdown icon="circle-fill" text="Lang" right>

Вот фрагмент сайта bootstrap - vue, на котором значки со стрелками вниз отображаются правильно. Самая нижняя фотография - фрагмент моего проекта с отсутствующими стрелками ..

Icons working

Здесь я добавил некоторые другие <b> компоненты к моему Проект, чтобы увидеть, если значки, стрелки работали. И они делают ..
enter image description here
enter image description here

Но для b-navbar Раскрытие .... Они не работают!

enter image description here


Предложения?

...