20

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:

  1. Install Bootstrap Icons into the application:
npm install bootstrap-icons

After installing I am able to see it in my package.json file.

  1. Add it to Main.js file:
import 'bootstrap-icons/font/bootstrap-icons';
  1. 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.

2
  • 1
    It seems like the font with the icons is missing. Open the Network tab and check if the font loaded
    – Vadzim
    Jul 2, 2021 at 13:28
  • @Vadzim Hi Thanks a lot for looking into the issue and providing the response. 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? Jul 2, 2021 at 13:30

3 Answers 3

45

Adding this line to the main.js seems to work for me:

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

The important part seems to be the .css at the end. Without it, it imports the .js file with the same name.

Now the i tags are working:

<i class="bi bi-clipboard"></i>
1
  • This is the best and cleanest answer in my opinion. (Note the question is tagged vuejs2 but the OP's answer refers to Vuejs3. As of 2022/11, Vue 3 and Bootstrap 5 function just fine together.)
    – DaveL17
    Nov 22, 2022 at 15:14
4

Finally, I was able to find the work-around. Most of the npm packages do not support Vuejs 3.x as it has been recently released.

The workaround is not to install it as a npm library rather than including the direct js or as CDN link to our application.

I added the following CDN to my index.html and that worked for me :

    <!-- Bootstrap Icons Starts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!-- Bootstrap Icons Ends -->
3

You need to import bootstrap-icons.css file in the main.js file:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.