如何使用标签助手或html助手在选择选项中显示字体图标？
如何使用标签助手或html助手在选择选项中显示字体图标？
提问于 2020-07-04 07:44:18
我遵循了this question中的答案，但我只得到字符代码，例如在我的<option>中的纯文本。
在我的控制器中，我填充了SelectList的项
public IActionResult Create()
{
ViewData["Icons"] = IconsDropdown();
return View();
}
private SelectList IconsDropdown()
{
List<ListItem> list = new List<ListItem>()
{
new ListItem{ Text = "", Value = "fa-user" },
new ListItem{ Text = "", 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指出，我需要fa-class on <select>，style="font-weight:900;" on <option>s。
但是使用标记助手，无法在<option>上设置样式，因此解决方案无法工作。
我一直在寻找一种使用@Html.DropDownListFor()而不是标记助手的方法，但到目前为止，我还没有发现它将允许我向<option>s添加css样式。我可以在<select>-tag上设置一个类，但仅此而已：
@Html.DropDownListFor(m =>
m.Icon,
ViewBag.Icons,
"Choose icon",
new { @class= "form-control fa" })回答 1
Stack Overflow用户
发布于 2020-07-04 08:46:40
我已经看到了一些例子，它们似乎可以工作，任何额外的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"></option>
<option value="fa-user-tie"></option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62726622
复制相关文章
相似问题
腾讯云开发者
