This tutorials covers How to add bootstrap icons in Legacy html pages Javascript nodejs apps

Bootstrap icons are used as cdn and nnpm

Installation

There are many ways to integrate bootstrap icons int into your applications

  • CDN copy

  • npm library

  • download

  • with CDN,

You can use the link from below in your legacy html pages or javascript web applications

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  • bootstrap-icons npm library

You can integrate into any javascript application using npm install command boostrap-icons is an npm library

npm install boostrap-icons --save

Download boostrap js file into your application:

This approach is download from cdn and copies to your application assets or javascript or any name you want

Please refer that path of the bootstrap javascirpt file path in your application

once bootstrap javascript is configured, You can use the icon in your application

Like a bootstrap icons, you can use i tag to include an icon

    <i class="bi-battery">Battery</i>
    ```
You can add icon  name  using class  attribute

Another way is to add SVG directly in html as seen below
```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-battery" viewBox="0 0 16 16">
  <path d="M0 6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6zm2-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H2zm14 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z"/>
</svg>