如何使用 Unicode 表示法使用 bootstrap 字体

Question

您好，我需要一个下拉菜单，它将使用图标列出边框选项。要显示图标，我正在使用 bootstrap 库。下面是我正在尝试的代码

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

<body>
  <select>
    <option>
      &#xF1AD;
    </option>
  </select>
</body>

我从 Bootstrap docs 获得了 Unicode。但图标未在下拉列表中呈现。我在这里做错了什么？

Answer 1

您还必须为这些元素设置字体系列。在这种情况下，您需要在和选项中使用 select 元素，因为它显示 selection。然后，您必须覆盖文本选项。问题是 selected 值的字体有误。

不过我不确定你的目标是什么。选项需要可访问的文本。

.has-icons {
  font-family: "bootstrap-icons";
}

.has-icons .other-font {
  font-family: arial, sans-serif;
}

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

<body>
  <select class="has-icons">
    <option>&#xF1AD;</option>
    <option class="other-font">Standard font option</option>
  </select>
</body>

如何使用 Unicode 表示法使用 bootstrap 字体

How to use bootstrap font using Unicode notation

html

twitter-bootstrap

bootstrap-4