如何向 kendo UI MVC 菜单添加字体超棒的图标？

Question

我正在尝试将超赞字体图标添加到 kendo UI ASP.NET 菜单中。不幸的是，我无法在 Kendo 中找到有关如何操作的示例。代码如下：

           @(Html.Kendo().Menu()
          .Name("PreferencesMenu")
          .HtmlAttributes(new { style = "width: 125px; height:900px; border:0px;" })
          .Direction("down")
          .Orientation(MenuOrientation.Vertical)
          .Items(items =>
          {
              items.Add()
                  .Text("Account");

              items.Add()
                  .Text("Notification")
                  .Items(children =>
                  {
                      children.Add().Text("Email");
                  });

              items.Add()
                  .Text("Theme");

          })
            )

有谁知道如何在 .Text("Account"); 之前添加字体超赞的图标？ ？

Answer 1

这似乎适用于示例项目。

如果更改 .Text("Account")

对此

 .Text("<span class=\"fa fa-arrow-up\"></span> Account").Encoded(false)

然后应该会在“帐户”旁边显示一个向上箭头。 （显然，将 Font Awesome 元素更改为您想要的元素。

编辑：我为您添加了以下示例，展示了它在多个级别的工作情况并在子级别添加了字体

@(Html.Kendo()
      .Menu()
      .Name("men")
      .Items(item =>

                    {
                        item.Add()
                            .Text("<span class=\"glyphicons glyphicons-ok\"> </span>some item")
                            .Items(i =>
                                        {
                                            i.Add().Text("<span class=\"glyphicons glyphicons-plus\"></span> Hello").Encoded(false);
                                        }
                                  )
                            .Encoded(false);
                        item.Add()
                            .Text("<span class=\"glyphicons glyphicons-thumbs-up\"> </span>some item")
                            .Items(i => 
                                       { 
                                           i.Add().Text("Hello"); 
                                       })
                            .Encoded(false);
                    })
)

设置 .Encoded(false) 的原因是渲染引擎只传递数据并假定写出它是安全的代码相当于做

@Html.Raw("<p> some html here</p>")

通过将其设置为 true，系统只会将传入的文本视为字符串，不会尝试解释文本，然后应用任何 "html/javascript" 识别，例如。 <p>I'm a paragraph</p> 如果编码设置为 true 将呈现为 <p>I'm a paragraph</p> 如果 false 会给你 我是一个段落 因为它是自己的段落并且标记将是应用于页面。