如何使用标签助手或 html 助手在选择选项中显示 Font Awesome 图标？ [复制]

Question

我已经按照this question 中的答案进行了操作，但我只得到了字符代码，例如 在我的<option>s 中以纯文本形式显示。

在我的控制器中，我为 SelectList 填充项目：

public IActionResult Create()
{
    ViewData["Icons"] = IconsDropdown();
    return View();
}

private SelectList IconsDropdown()
{
    List<ListItem> list = new List<ListItem>()
    {
        new ListItem{ Text = "&#xf007;", Value = "fa-user" },
        new ListItem{ Text = "&#xf508;", Value = "fa-user-tie" },
        // and so on...
    };
    return new SelectList(list, "Value", "Text");
}

class ListItem
{
    public string Text { get; set; }
    public string Value { get; set; }
}

然后我将列表项分配给视图中的select：

<select asp-for="Icon" class="form-control select-fontawesome" asp-items="ViewBag.Icons">
    <option selected disabled value="">Choose icon</option>
</select>

我也尝试删除 form-control 类，但结果相同。

设置字体的 CSS：

.select-fontawesome {
    font-family: 'FontAwesome', 'sans-serif';
}

如果我尝试在普通文本中显示 FontAwesome 图标，它会起作用：

<span class="fas fa-user"></span>

更新

感谢@MBaas 指出我需要<select> 上的fa 类和<option>s 上的style="font-weight:900;"。

但是使用 tag-helper，无法在<option>s 上设置样式，因此该解决方案不起作用。

我一直在寻找一种使用@Html.DropDownListFor() 代替标签助手的方法，但到目前为止我还没有发现它可以让我将css 样式添加到<option>s。我可以在<select>-tag 上设置一个类，仅此而已：

@Html.DropDownListFor(m => 
    m.Icon, 
    ViewBag.Icons, 
    "Choose icon", 
    new { @class= "form-control fa" })

Answer 1

我看到的例子似乎在没有任何额外的 CSS 或类的情况下工作 - 但不知何故，我可以按照这些思路产生一些东西。但是以下内容对我有用；）

将fa 类应用于select 控件（该位随FontAwesome 提供），然后为选项设置一些样式以确保它们是font-weight: 900 的样式。 fa也这样做了，但它似乎被浏览器的设置覆盖了。然后我们的设置会覆盖浏览器。

   <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<style>
select.fa option {font-weight: 900}
</style>
<select name="sample" id="sample" class="fa">
        <option value="">Choose icon</option>
        <option value="fa-user">&#xf007;</option>
        <option value="fa-user-tie">&#xf508;</option>    
</select>