不显示 bootstrap 图标甚至导入 BIcon

Question

在我的 nuxt.js bootstrap-vue 项目中：

我按照github使用bootstrap图标： the link

我的代码：

      <b-icon variant="success" icon="arrow-up"></b-icon>
      <b-icon variant="success" icon="alert-triangle"></b-icon>

      <b-icon icon="alert-circle-fill" variant="success"></b-icon>

      <h2 class="group_title">Anime Wallpapers</h2>

...

<script>

  import { BIcon, BIconArrowUp } from 'bootstrap-vue'

  export default{
    data(){
      return {
        msg: 'hello vue'
      }
    },
    components: {
      BIcon
    }
  }
</script>

但是没有出现:

Answer 1

您导入了 BIcon 并注册了它，但是您没有注册请求的单个图标。

试试这个：

      <b-icon variant="success" icon="arrow-up"></b-icon>

      <b-icon icon="alert-circle-fill" variant="success"></b-icon>

      <h2 class="group_title">Anime Wallpapers</h2>

...

<script>

  import { BIcon, BIconArrowUp } from 'bootstrap-vue'

  export default{
    data(){
      return {
        msg: 'hello vue'
      }
    },
    components: {
      BIcon,
      BIconArrowUp // <- The icon needs to be registered with your page/app
    }
  }
</script>

请参阅提到您需要导入单个图标的文档：https://bootstrap-vue.org/docs/icons#usage

不显示 bootstrap 图标甚至导入 BIcon

Do not show up the bootstrap icon even import BIcon

icons

vue.js

nuxt.js

bootstrap-vue