如何在kendo UI MVC菜单中添加字体真棒图标?

时间:2015-04-21 17:10:25

标签: font-awesome kendo-asp.net-mvc

我正在尝试将一个字体真棒图标添加到一个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(“帐户”)之前添加字体真棒图标; ?

1 个答案:

答案 0 :(得分:6)

这似乎对我有一个示例项目。

如果您更改 .Text("帐户")

到此

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

那应该在Account旁边显示一个向上箭头。 (显然将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,系统只会将传入的文本视为字符串,并且不会尝试解释文本,然后应用任何&#34; html / javascript&#34;认可,例如。 <p>I'm a paragraph</p>如果编码设置为true,则会显示为<p>I'm a paragraph</p>,如果为false,则会为您提供我的段落,因为它自己的段落和标记将应用于页面。