无法将引导图标放入web.css文件

Question

我试图在我所有的下拉列表末尾添加一个引导图标，所以我想在我的css文件中这样做。我可以添加他们的图标直接在网页上，如，但我一直无法使它在web.css工作。它所做的就是添加一个空框，就像找不到图标一样。

他们说它的css是\F 282 (https://icons.getbootstrap.com/icons/chevron-down/)

html

请选择一个字段

web.css

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

替我回答-

找到了。我不得不加上字体系列

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

Answer 1

找到了。我不得不加上字体系列

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

Answer 2

如果您使用引导图标，您应该添加导入链接到您的css文件。

例如，在web.css文件开始时，应该添加引导图标。

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

如果不能这样使用，则可以在html head部分使用此链接。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstraicons@1.8.1/font/bootstrap-icons.css">

我的建议使用直接svg链接到您的html文件是更有用的。

Answer 3

给你一个简单的方法。

您添加的每个类都将准备好定义引导图标。

​

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

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

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

​