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

Posted

技术标签:

【中文标题】在 Vuejs Template 中使用时,Bootstrap 图标不会出现在前端【英文标题】:Bootstrap icons does not appear in the front-end when used in Vuejs Template 【发布时间】:2021-09-14 10:35:53 【问题描述】:

我正在尝试使用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"   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 有效,难道不能只添加&lt;i class="bi bi-clipboard"&gt;&lt;/i&gt; 并获取图标吗?

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

【问题讨论】:

似乎缺少带有图标的字体。打开网络选项卡并检查是否加载了字体 @Vadzim 嗨,非常感谢您调查问题并提供回复。 Font With Icons 缺少手段?我需要安装任何新软件包吗?如果可以,请指定我需要安装哪一个? 【参考方案1】:

最后,我找到了解决方法。大多数npm 软件包不支持Vuejs 3.x,因为它最近发布了。

解决方法是不要将其安装为npm library,而是将jsCDN link 直接安装到我们的应用程序中。

我将以下CDN 添加到我的index.html 中,这对我有用:

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

【讨论】:

【参考方案2】:

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

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

重要的部分似乎是结尾的 .css。没有它,它会导入同名的 .js 文件。

现在 i 标签正在工作:

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

【讨论】:

以上是关于在 Vuejs Template 中使用时,Bootstrap 图标不会出现在前端的主要内容,如果未能解决你的问题,请参考以下文章

使用 jest 和 avoriaz 时如何在 Vuejs 的组件中测试异步方法

在 VueJS 中访问 Auth

在 vuejs + laravel 中使用 jest 进行单元测试

如何在使用 VueJS(在移动设备上)单击 X 时关闭横幅

使用 Typescript 在 VueJS2 项目中使用 Jest 进行测试

vuejs template click怎么直接传递this