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

Posted 2023-03-30

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

【英文标题】：How to display Font Awesome icons in select options using tag helper or html helper? [duplicate]

【发布时间】：2020-07-04 07:44:18

【问题描述】：

我已经按照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" )

【问题讨论】：

您要设置哪些 CSS 样式？ ...请注意，使用 CSS 几乎不可能对表单元素进行样式设置，option 可能是最糟糕的，因为几乎没有什么可以用它来完成，并且使用例如标签助手无法克服这一点。

@Ason 我正在尝试设置font-weight:900。

这是你要找的东西吗：***.com/questions/104458/…

@Ason 不，那是CheckBoxList。这不是下拉菜单 (<select>)。

@Ason 其他两个问题都没有涵盖我的要求。请重新打开我的问题。

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

【讨论】：

感谢<select> 上的fa 课程！但是我无法使用标签助手或 html-helper 在<option>s 上设置 css 样式，所以它无论如何都不起作用。

我已经更新了答案并添加了一种处理这些选项的样式。所以即使是无样式的选项现在也能正确显示！

我想如果不是因为 Asp html-renderer 将 & 转换为 & 的事实，这将解决它。我现在才意识到。选项如下所示：<option value="fa-user-shield"></option>.

再次更新了答案以更好地描述该方法。渲染器决定覆盖的愚蠢。 Anc 有机会运行一些 JS 来注入所需的内容吗？ （呃，很多拐杖......）

@Stian 和 MBaas -- OP 询问如何使用 tag helper 或 html helper 设置样式，而您的答案在哪里没有显示如何要做到这一点。他们还在“问题编辑”中明确指出：但使用标签助手，无法在<option>s 上设置样式，因此解决方案 不起作用。 ，在这种情况下，它们表示您的解决方案。不过，副本的答案解决了所要求的问题。