I am trying to build the Web application using the Vue.JS
and within my application, I am trying to use the [Bootstrap Icons][1]
. But for some reason even after adding the icons, they do not appear on the screen.
I did the following steps:
- Install
Bootstrap Icons
into the application:
npm install bootstrap-icons
After installing I am able to see it in my package.json
file.
- Add it to
Main.js
file:
import 'bootstrap-icons/font/bootstrap-icons';
- Within the component add it to the required button:
<template>
<button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>
This is not making any difference to my button text. I am still able to see only Copy
text on the button.
As per the documentation, there is another way to add icons. When I add the SVG
then I get the icons:
<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 not understanding why only SVG
works, isn't it possible to add only <i class="bi bi-clipboard"></i>
and get the icons?
This may be a silly question but I am looking for some explanation and usage of icons in the Vuejs application.
Font With Icons
missing means? Do I need to install any new package? If so can you please specify which one I need to install?