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

发布时间：2020-12-15 20:50:51 所属栏目：asp.Net 来源：网络整理

导读：我正在尝试将一个字体真棒图标添加到一个kendo UI ASP.NET菜单中.不幸的是,我无法在剑道找到一个如何做到这一点的例子.代码如下： @(Html.Kendo().Menu() .Name("PreferencesMenu") .HtmlAttributes(new { style = "width: 125px; height:900px; border:0px;

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

解决方法

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

如果更改.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(“ some html here”)

通过将其设置为true,系统只会将传入的文本视为字符串,并且不会尝试解释文本,然后应用任何“html / javascript”识别,例如. 我是段落如果encoding设置为true,则渲染为我是段落如果false会给你我是段落,因为它是自己的段落,标记将应用于页面.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!