我正在尝试将一个 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/