带有字体真棒图标的 mvc razor 中的下拉列表答案

【问题标题】：Dropdownlistfor in mvc razor with font awesome icons带有字体真棒图标的 mvc razor 中的下拉列表
【发布时间】：2016-06-30 10:24:03
【问题描述】：

我有一个强类型视图，带有用于评级的下拉列表

 public class EmployeeRating
 {
  public  int RatingId { get; set; }
  public IEnumerable<RatingList> RatingList { get; set; } 
 } 

 public class RatingList
 {
   public int Value { get; set; }
   public string Text { get; set; }
  }

在我看来

@Html.DropDownListFor(m =>EmployeeRatings.RatingId,new SelectList(ViewBag.RateList, "Value", "Text", EmployeeRatings.RatingId),
                                                    "Select Rating", new { @class = "form-control"})

我的评分有好、差、一般。为此，我需要添加相关的字体真棒图标并在我的视图中显示。但它不是渲染图标，而是显示 <i class="fa fa-smile-o"></i>Good。然后我尝试使用 FA 图标的 UNICODE。但不显示图标（在下拉列表中显示 UNICODE）。我试过这样

RatingList = new List<RatingList>();

RatingList.Add(new RatingList { Value = 1, Text = "&#xf118; Good" });
RatingList.Add(new RatingList { Value = 2, Text = "&#xf11a; Average" });

我什至找不到任何帮助标签来完成这项工作。我还需要为每个项目添加颜色，例如 smiley Good-Green 、frown Poor-Red 、meh 平均 -橙色。

我从过去两天开始这样做，但仍然没有运气。

请帮忙。提前致谢。

【问题讨论】：

标签： font-awesome dropdownlistfor

【解决方案1】：

使用以下内容在下拉列表中呈现 FA 图标：

@Html.DropDownListFor(m => m.SelectedSiteID, Model.Sites, null, new { @id =   "siteSelection", @onchange = "siteChanged(this)", @class = "siteSelector" })  
<i style="position:absolute;top:10px;font-size:24px;right:15px;color:white;pointer-events:none;" class="fa fa-angle-down" aria-hidden="true"></i>

【讨论】：