如何在选择选项中添加字体真棒图标？答案

【问题标题】：How to add font awesome icons inside select options?如何在选择选项中添加字体真棒图标？
【发布时间】：2021-06-30 00:53:20
【问题描述】：

我想在用户处于活动或非活动状态时添加一些字体很棒的图标...等等。我正在尝试使用此代码：

    <td>
    <select class="statusSelect" data id="{{$user->id}}">

    <option {{getStatus($user->status) == 'Active' ? 'selected' : ''}} value="a">
    <i class="fa fa-minus-circle text danger"></i>
    <strong> {{__('home.active')}} </strong> 
    </option>

    <option {{getStatus($user->status) == 'Wait' ? 'selected' : ''}} value="w">
    <i class="fa fa-minus-circle text-warning"> </i>
    <strong> {{__('home.wait')}} </strong>
    </option>

    <option {{getStatus($user->status) == 'Banned' ? 'selected' : ''}} value="b">
    <i class="fa fa-minus-circle text-danger"> </i>
    <strong> {{__('home.ban')}} </strong>
    </option>

    </select>
    </td>

我也阅读了this，但在我的情况下不起作用。

【问题讨论】：

您的fa 版本是什么？将类 fa 更改为 fas ，看起来像这样 <i class="fas fa-minus-circle"></i> 看这里 fontawesome.com/icons/minus-circle?style=solid

标签： html css laravel bootstrap-4

【解决方案1】：

Html 选项标签允许的内容只有text。您正在尝试在选项标签中添加 html 内容。这就是为什么浏览器会清除您插入的内容。

在您分享的博客文章中，它适用于 JavaScript。它读取选项的 data- 属性并用自定义 html 结构替换（或包装和隐藏）<select>（包含选项），它看起来像选择组件，但实际上不是。

您可以使用 JavaScript 创建您的自定义选择框，或者在网络上查找数十个示例。

看看这个：https://thdoan.github.io/bootstrap-select/examples.html

【讨论】：

【解决方案2】：

你用的是什么字体很棒的版本？您是否尝试过使用 data-content 属性？因为使用“data-content”属性，我们可以将自定义 HTML 插入到选项中，例如 font-awesome 标签。

可能像这样的代码：

<select class="selectpicker">
  <option data-content="<i class='fa fa-address-book-o' aria-hidden='true'></i>Option1"></option>
  <option data-content="<i class='fa fa-calculator' aria-hidden='true'></i>Option2"></option>
  <option data-content="<i class='fa fa-heart' aria-hidden='true'></i>Option3"></option>
</select>

【讨论】：