I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen.
Here are the steps I followed:
- Installed
Bootstrap Iconsinto the application:
npm install bootstrap-icons
Upon installation, I verified its presence in my package.json file.
- Added it to the
Main.jsfile:
import 'bootstrap-icons/font/bootstrap-icons';
- Incorporated it within the component where needed, such as a button:
<template>
<button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>
However, this implementation did not alter the appearance of my button text. Only the Copy text remained visible on the button.
The documentation suggests another approach for adding icons, which involves utilizing SVG elements to display them:
<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>
I am puzzled why only the SVG method seems to work. Is it not possible to simply use
<i class="bi bi-clipboard"></i>While this question may seem basic, I am seeking clarification on how to effectively utilize icons in a Vuejs application.