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

Posted 2023-03-05

【中文标题】如何在选择选项中添加字体真棒图标？

【英文标题】：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

【参考方案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>