我尝试使用Vue.JS构建Web应用程序，在我的应用程序中，我尝试使用[Bootstrap Icons][1]。但是由于某种原因，即使添加了图标，它们也没有出现在屏幕上。
我执行了以下步骤：
1.将Bootstrap Icons安装到应用程序中：
npm install bootstrap-icons安装后，我可以在我的package.json文件中看到它。
1.将其添加到Main.js文件：
import 'bootstrap-icons/font/bootstrap-icons';1.在组件内，将其添加到所需的按钮：
<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应用程序。
3条答案
按热度按时间eufgjt7s1#
在main.js中添加以下代码行似乎对我有用：
重要的部分似乎是最后的.css。没有它，它导入同名的.js文件。
现在，i标记可以正常工作了：
v7pvogib2#
最后，我找到了解决办法。大多数
npm包不支持Vuejs 3.x，因为它是最近发布的。解决方法是不将其作为
npm library安装，而将直接的js或作为CDN link包含到我们的应用程序中。我将下面的
CDN添加到我的index.html中，这对我很有效：muk1a3rh3#
您需要在main.js文件中导入bootstrap-icons.css文件：