如何在Kendo UI MVC菜单中添加Font Awesome图标？

Question

如何在Kendo UI MVC菜单中添加Font Awesome图标？

7

我想在kendo UI ASP.NET菜单中添加一个font awesome图标，但是我无法在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");之前添加一个font-awesome图标吗？

- Justin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Shorthose · Accepted Answer

这对我来说在一个示例项目中似乎有效。

如果您将.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(" some html here") 将其设置为 true 后，系统仅将传入的文本视为字符串，并不尝试解释该文本，也不应用任何“HTML/JavaScript”识别，例如：I'm a paragraph 如果编码设置为 true，则渲染出 I'm a paragraph，如果为 false，则会将I'm a paragraph作为自己的段落，并将标记应用到页面上。