时间戳

首页 > 解决方案 > 如何在选择选项中添加字体真棒图标？

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>

我也读过这个，但在我的情况下不起作用。

标签： htmlcsslaravelbootstrap-4

解决方案

你用的是什么字体很棒的版本？您是否尝试过使用 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>

推荐阅读