在Vuejs模板中使用时前端不会出现Bootstrap图标

Question

我正在尝试使用

Vue.JS

构建 Web 应用程序，并且在我的应用程序中，我正在尝试使用

[Bootstrap Icons][1]

。但由于某种原因，即使添加图标后，它们也不会出现在屏幕上。

我执行了以下步骤：

1. 将

   Bootstrap Icons

   安装到应用程序中：

npm install bootstrap-icons

安装后，我可以在我的

package.json

文件中看到它。

2. 将其添加到

   Main.js

   文件：

import 'bootstrap-icons/font/bootstrap-icons';

3. 在组件内将其添加到所需的按钮：

<template>
  <button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>

这对我的按钮文本没有任何影响。我仍然只能看到按钮上的

Copy

文本。

根据文档，还有另一种添加图标的方法。当我添加

SVG

时，我会得到图标：

 <button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
  <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg></button>

我不明白为什么只有

SVG

有效，是不是可以只添加

<i class="bi bi-clipboard"></i>

并获取图标？

这可能是一个愚蠢的问题，但我正在寻找 Vuejs 应用程序中图标的一些解释和用法。

Answer 1

将此行添加到 main.js 似乎对我有用：

import 'bootstrap-icons/font/bootstrap-icons.css'

重要的部分似乎是最后的.css。 如果没有它，它将导入同名的 .js 文件。

现在 i 标签正在工作：

<i class="bi bi-clipboard"></i>

Answer 2

最后，我找到了解决方法。大多数

npm

软件包不支持

Vuejs 3.x

，因为它是最近发布的。

解决方法是不要将其安装为

npm library

，而不是将直接

js

或作为

CDN link

添加到我们的应用程序中。

我将以下

CDN

添加到我的

index.html

中，这对我有用：

    <!-- Bootstrap Icons Starts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!-- Bootstrap Icons Ends -->

Answer 3

您需要在main.js文件中导入bootstrap-icons.css文件：

import 'bootstrap-icons/font/bootstrap-icons.css';

Answer 4

我成功了，应用 bootstrap-vue 指南。

基点！ “Vue”

从“vue”导入Vue；
Vue.use(IconsPlugin);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);

import { createApp } from "vue";
import Vue from "vue";

import { BootstrapVue, BootstrapVueIcons, IconsPlugin } from "bootstrap-vue";
import "bootstrap-icons/font/bootstrap-icons.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(IconsPlugin);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);

const app = createApp(App);
app.use(router);
app.mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>
<script>

export default {
  name: 'App',
  props: {
    
  },
},
</script>
<template>
<b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
</template>

enter code here