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

Question

我想在我所有的 dropbtns 末尾添加一个 bootstrap 图标，所以我想在我的 css 文件中这样做。我可以直接在网页中添加他们的图标，例如但我无法让它在 web.css 中工作。它所做的只是添加一个空框，就像找不到图标一样。

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

html

web.css

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

为我解答-

找到了。我必须添加 font-family

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

Answer 1

如果您使用 bootstrap 图标，您应该将导入 link 添加到您的 css 文件中。

例如，在 web.css 文件的开头，您应该添加 bootstrap 图标

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

如果你不能用那种方式，你可以用这个 link 作为你的 html 头部部分

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

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

Answer 2

找到了。我必须添加 font-family

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

Answer 3

这里有一个简单的方法。

您添加的每个 class 都将准备好定义 bootstrap 图标。

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

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

Can't put bootstrap Icon into web.css file

html

css

bootstrap-icons