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

Question

我正试图在所有dropbtn的末尾添加一个引导程序图标，所以我想在css文件中这样做。我可以直接在网页中添加他们的图标<i类＝"；bi-bi-chevron向下">lt/i>但我一直无法让它在web.css中工作。它所做的只是添加一个空框，就像找不到图标一样。

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

html

<button onclick="；toggleDropDown(this("；class＝"；dropbtn">请选择一个字段<按钮>

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头部分

<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>