如何将bootstrap-vue图标包含在nuxtjs中？导航栏向下箭头的问题

Question

编辑：嗯，可能会有样式覆盖-我可以从多数民众赞成在下面的下拉列表工作。并将其粘贴到导航区域，向下箭头消失。对于“ lang”下拉菜单也可以这样说，如果我将其移至主体，则会显示箭头。.

编辑：FML-这是另一个导航栏样式，使用范围大声笑

Navbar svg向下箭头不会显示。其他大多数图标也都可以正常工作。下面的代码几乎可以复制并粘贴以进行引导Vue示例。。

<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/#installhttps://bootstrap-vue.js.org/docs/icons/

npm i bootstrap-icons

我创建了一个包含nuxt.config.js的插件。元素似乎都正常工作，但是图标。.

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

/下面的/plu​​gins/bootstrap.vue.js

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

我也尝试过具体包括它们

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）我确实在node_modules / bootstrap-vue文件夹中看到bootstrap.vue-icon。*。它包含-icons.common.js，-icons.css。

我也尝试将图标直接添加到元素，如[。

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

这里是自举网站的一个片段，向下箭头图标正确显示。最底部的照片是我的项目的片段，缺少箭头。.

这里我在项目中添加了其他<b>组件，以查看图标，箭头是否有效。它们确实起作用。 但是对于b-navbar-dropdown...。它们不起作用！

建议？

Answer 1

我们可以这样导入BootstrapVueIcons：首先，编辑bootstrap-vue.js文件

my nuxtjs project第二，将此内容添加到此文件中

import Vue from 'vue';

import { BootstrapVue ,BootstrapVueIcons} from 'bootstrap-vue';

Vue.use(BootstrapVue, {});

Vue.use(BootstrapVueIcons, {})

那么你会得到它。