bootstrap-5bootstrap-icons

My bootstrap icons logo is appearing square

I have included my Boostrapmin and bootstrap icon CSS as well.

                <i class="bi bi-play-circle"></i>

this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.

Solution

  • I have included my Boostrapmin and bootstrap icon CSS as well.

                    <i class="bi bi-play-circle"></i>

    this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.

    So, Here I am writing a solution Thanks to @zim for help.

    Step1: Download Bootstrap icon CSS file, bootstrap-icons.css Link it in your project --By including in CSS file OR --By linking in HTML file.

    After that download the fonts folder from the Bootstrap icons git repository. --Now open bootstrap-icons.css And you will find code like this

    @font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrapfonts/bootstrap-icons.woff2") //Match this file path format("woff2"),
    url("../fonts/bootstrapfonts/bootstrap-icons.woff") //Match this file pathformat("woff");
}

    -bootstrap-icons.woff2 and bootstrap-icons.woff make sure you link it properly with bootstrap-icons.css file. And boom you are good to go.. :)