0

I am creating a Vue2 app and want to use Bootstrap5 icons. Specifically, I want to be able to use the "icon font" type (ie, <i class="bi-alarm"></i>) instead of embedding an SVG element.

So, I have installed the npm package like so:

npm i bootstrap-icons

but...now what? The Bootstrap5 icon docs did not say anything further. Do I need to install a SASS package? Should I create a Vue plugin? Or, just import the icons as needed for each component?

I am using Vue-CLI.

Thank you for any tips!

redshift
  • 4,815
  • 13
  • 75
  • 138

1 Answers1

1

Taking a cue from this answer by @Anonymous, you need to import the CSS from the package in order to use the the icons in <i> tags.

In much the same way as it can be imported from CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<div>
<p>This is an icon test:</p>
<i class="bi-alarm"></i>
<i class="bi bi-sunglasses" style="font-size: 5rem; color: blue;"></i>
<i class="bi-suit-heart-fill" style="font-size: 2rem; color: red;"></i>
</div>

...you should be able to import it into your main.css file (or equivalent) locally from the installed package via:

@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');

Also, to be thorough, I'll mention that you need to be using bootstrap-icons v1.2.0 or later to use them as fonts in the <i> tags.

zcoop98
  • 2,590
  • 1
  • 18
  • 31
  • Did not work. I am using `Vue-CLI` which uses webpack. So I installed bootstrap-icons via npm. Now, how to import the individual icon I want to use? Simply adding `` to the template did not work. I was thinking something like: `import biAlarm from 'bootstrap-icons/font/fonts/'` – redshift Jul 14 '21 at 18:57
  • Hm... are you using bootstrap-vue, or just Bootstrap classes outright? – zcoop98 Jul 14 '21 at 18:58
  • 1
    Bootstrap classes outright because Bootstrap-vue does not support Bootstrap5 ..yet. – redshift Jul 14 '21 at 19:00
  • 1
    I think I figured out the crucial part– to use the icons as `` tags, the docs specifically mention that the CSS needs to be imported: "[Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML](https://icons.getbootstrap.com/#icon-font)" – zcoop98 Jul 14 '21 at 19:10
  • 1
    That seems weirdly clunky though, I would've expected it to work with the package outright, without having to import the CSS manually. Hm. – zcoop98 Jul 14 '21 at 19:12
  • 1
    Yea, I am not sure of the path I'll take yet....but thanks so much! – redshift Jul 14 '21 at 20:13