如何使用引导程序 5 和引导程序图标在选择中添加图标答案

【问题标题】：How to add icons in a select using bootstrap 5 and bootstrap icons如何使用引导程序 5 和引导程序图标在选择中添加图标
【发布时间】：2021-12-16 15:53:04
【问题描述】：

我想像这样向引导选择添加一些图标：

我尝试过的：

<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

【问题讨论】：

你试过“
不确定它如何与 Bootstrap 图标一起使用，因为我总是使用 Font Awesome 但是....<option selected>INSERT-FONT-AWESOME-ICON-HERE Filter</option> 应该在您正在寻找的某个地方。

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

The <option> tag 唯一允许的内容是：

文本，可能带有转义字符（如&eacute;）。

所以它可能只是被浏览器忽略了。当我尝试<option selected><i class="bi bi-funnel"></i> Filter</option> 时，在 Chrome 中检查元素时，<i> 标记甚至不会出现。

您可以使用Input group 或尝试查找suitable UTF character。

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

【讨论】：