如何在使用Bootstrap 5和Bootstrap图标的下拉列表中添加图标

Question

我希望为类似于这样的bootstrap选择器添加一些图标：

我尝试过：

<select class="form-select" aria-label="Filter select">
  <option data-icon="bi bi-funnel-fill" selected>Filter</option>
  <option value="1">All</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
</select>

我尝试使用data-icon（正如我在一些stackoverflow答案中看到的）但对我没有用。

我想知道在Bootstrap 5中是否有另一种方法来实现这个结果，或者我做错了什么。

欢迎任何帮助。

LIVE JS FIDDLE DEMO

- Cheknov

---

你尝试过使用带有Bootstrap图标的"<option data-content="<i class='fa fa-address-book-o' aria-hidden='true'></i>Option1"></option>"吗？ - Jordi Jordi

不确定如何使用Bootstrap图标，因为我总是使用Font Awesome，但是 <option selected>INSERT-FONT-AWESOME-ICON-HERE Filter</option> 应该是你正在寻找的东西。 - Cutey from Cute Code

Answer 1

<option> 标签只能包含以下内容：

文本，可能包含转义字符（如 é）。

因此，浏览器可能会忽略它。 当我尝试使用 <option selected><i class="bi bi-funnel"></i> 过滤</option> 时，甚至在 Chrome 中检查元素时，<i> 标签都不会显示出来。

您可以使用输入组或尝试找到适当的 UTF 字符。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

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

<div class="input-group">
  <label class="input-group-text" for=""><i class="bi bi-funnel"></i></label>
  <select class="form-select" aria-label="Filter select">
    <option selected><i class="bi bi-funnel"></i> Filter</option>
    <option value="1">All</option>
    <option value="2">Active</option>
    <option value="3">Inactive</option>
  </select>
</div>

<!-- OR -->

<select class="form-select" aria-label="Filter select">
  <option selected>&#x29E9; Filter</option>
  <option value="1">All</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
</select>

- Arleigh Hix