【问题标题】: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 但是....&lt;option selected&gt;INSERT-FONT-AWESOME-ICON-HERE Filter&lt;/option&gt; 应该在您正在寻找的某个地方。

标签: twitter-bootstrap bootstrap-5


【解决方案1】:

The &lt;option&gt; tag 唯一允许的内容是:

文本,可能带有转义字符(如&amp;eacute;)。

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

您可以使用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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-02-06
    • 1970-01-01
    • 2016-10-21
    • 1970-01-01
    • 2019-07-08
    • 2014-05-26
    • 1970-01-01
    相关资源
    最近更新 更多