Can't put bootstrap Icon into web.css file-CodePudding

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 ></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)" >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";
}

CodePudding user response：

If you using bootstrap icon you should add import link to your css file.

For example at start of your web.css file you should add bootstrap icon

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

If you cant use that way you can use this link for your html head section

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

My advice using direct svg link to your html file is more useful.

CodePudding user response：

Found it. I had to add the font-family

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

CodePudding user response：

Here is an easy method for you.

Every class you add will be ready to define bootstrap icon.

    .bi{
       display: inline-block;
       font-family: "bootstrap-icons";
       font-size: inherit;
       text-rendering: auto;
    }

    dropbtn::after{
        content: "\f282";
    }

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