Html 如何在选择选项中添加字体图标？

我想在用户处于活动或非活动状态时添加一些图标。。。等等。我正在尝试使用以下代码：

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

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

状态）=“激活”？'所选“：”}}value=“a”>
{{{（home.active'）}
状态）=‘等待’？'所选“：”}}value=“w”>
{{{（home.wait'）}
状态）=“禁止”？'所选“：”}}value=“b”>
{{{（home.ban'）}

---

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

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

在您共享的博客文章中，它使用JavaScript。它读取选项的

数据-

属性，并用自定义html结构替换（或换行和隐藏）。

（包含选项）它看起来像选择组件，但实际上不是

您可以使用JavaScript创建自定义选择框，也可以在web中找到几十个示例

---

看看这个：

你用的是什么字体版本？您是否尝试过使用“数据内容”属性？因为使用“数据内容”属性，我们可以将自定义HTML插入到诸如字体标签之类的选项中

也许像这样的代码：

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

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

---

您的

fa

版本是什么？将class

fa

更改为

fas

，如下所示