My bootstrap icons logo is appearing square

Question

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.

Answer 1

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.. :)

---