Bootstrap Icon

Bootstrap has its own icon library and now available for any project.

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

Currently v1.1.0

Icons

Click On Each Icons To Copy i tag.

    Usage

    Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. Bootstrap Icons include a width and height of 1em by default to allow for easy resizing via font-size.

    Use Fonts

    Use i Tag to insert any icons. Before Using i tag you should add fonts folder and Bootstrap-Icon.min.css like my exactly directory and link css file to your project, It's Like Font-Awsome and also you can resizing font-size with .bi-xs .bi-sm .bi-lg .bi-2x .bi-3x .bi-5x .bi-7x .bi-10x 

    <i class="bi bi-alarm"></i>
<i class="bi bi-alarm bi-xs"></i>
<i class="bi bi-alarm bi-3x"></i>

    Use Unicode

    You can add class and change the content:"\unicode" before with unicode for each icons. 

    <i class="at"></i>
<style>.at::before{content:"\e951";}</style>

    Embedded

    Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height. 

    <svg width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

    Sprite

    Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., toggles is #toggles). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming. 

    <svg width="32" height="32" fill="currentColor"><use xlink:href="bootstrap-icons.svg#heart-fill"/></svg>
<svg width="32" height="32" fill="currentColor"><use xlink:href="bootstrap-icons.svg#toggles"/></svg>
<svg width="32" height="32" fill="currentColor"><use xlink:href="bootstrap-icons.svg#shop"/></svg>

    External image

    Copy the Bootstrap icons SVGs to your directory of choice and reference them like normal images with the <img> element. 

    <img src="./icons/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

    Styling

    If you're using bootstrap you can change the color of svgs with text classes in bootstrap.

    Styling With Bootstrap

    By using .text classes in bootstrap you can change the color of icons. And also if you're not using bootstrap you can change color with css style. 

    <i class="bi bi-bootstrap bi-3x text-success"></i>