我正在尝试将一个 Font Awesome 图标添加到kendo UI ASP.NET菜单中。不幸的是,我在剑道找不到如何做到这一点的例子。代码如下:

           @(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 图标? ?

最佳答案

这似乎对我来说适合一个示例项目。

如果您更改 .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)将为您提供。我是段落,因为它是自己的段落,因此标记将应用于页面。

关于font-awesome - 如何在Kendo UI MVC菜单中添加超棒的图标?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29778865/

10-12 12:46
查看更多