Search code examples
htmlcssbootstrap-icons

Can't put bootstrap Icon into web.css file

I am trying to add a bootstrap icon at the end of all my dropbtns, so I wanted to do that in my css file. I am able to add their icons directly in the web page like <i class="bi bi-chevron-down"></i> but I have been unable to get it to work in web.css. All it does is add an empty box like it cannot find the icon.

They say the css for it is \F282 (https://icons.getbootstrap.com/icons/chevron-down/)

html

<button onclick="toggleDropDown(this)" class="dropbtn">Please select a field</button>

web.css

.dropbtn::after{
    content: "\F282";
    justify-content: flex-end;
}

Answer for me-

Found it. I had to add the font-family

.dropbtn::after{
        content: "\f282";
        justify-content: flex-end;
        font-family: "bootstrap-icons";
}
Solution

  • Found it. I had to add the font-family

    .dropbtn::after{
        content: "\f282";
        justify-content: flex-end;
        font-family: "bootstrap-icons";
    }