html - 在 Vuejs Template 中使用时，Bootstrap 图标不会出现在前端

Question

我正在尝试使用 Vue.JS 构建 Web 应用程序。在我的应用程序中，我尝试使用 [Bootstrap Icons][1] .但由于某种原因，即使添加了图标，它们也不会出现在屏幕上。
我做了以下步骤:

安装 Bootstrap Icons进入应用程序:

npm install bootstrap-icons

安装后，我可以在我的 package.json 中看到它文件。

添加到Main.js文件:

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

在组件内将其添加到所需的按钮:

<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>