0

我正在尝试在所有 dropbtns 的末尾添加一个引导图标，所以我想在我的 css 文件中执行此操作。我可以像 <i class="bi bi-chevron-down"></i> 这样直接在网页中添加他们的图标，但我无法让它在 web.css 中工作。它所做的只是添加一个空框，就像找不到图标一样。

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

html

<button onclick="toggleDropDown(this)" class="dropbtn">请选择一个字段</button>

网页.css

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

替我回答——

找到了。我必须添加字体系列

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

3 回答 3

0

如果您使用引导图标，则应将导入链接添加到您的 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 文件更有用。

于 2022-02-25T23:10:02.413 回答
0

找到了。我必须添加字体系列

.dropbtn::after{
        content: "\f282";
        justify-content: flex-end;
        font-family: "bootstrap-icons";
    }
于 2022-02-25T23:13:34.603 回答
0

这是一个简单的方法。

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

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

于 2022-02-25T23:57:17.443 回答