How to add a font-awesome icon to the kendo UI MVC menu?

Question

I am trying to add an awesome icon font to the kendo UI ASP.NET Menu. Unfortunately, I cannot find an example in Kendo on how to do this. The code is as follows:

@(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"); }) ) 

Does anyone know how I can add a font - an awesome icon in front of .Text ("Account");

Answer 1

It seemed to work for me with a sample project.

If you change .Text ("Account")

For this

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

Then you should show the arrow next to the account. (Obviously change the Font Awesome element to the one you want.

edit: I added the following example showing that it works at several levels and adds a font at a child level

 @(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); }) ) 

The reason for setting .Encoded (false) is because the rendering engine simply passes data and assumes that safe code for writing is equivalent to executing

@Html.Raw("<p> some html here</p>")

Setting it to true , the system simply processes the incoming text as a string and does not try to interpret the text, and then apply any "html / javascript" recognition, for example. <p>I'm a paragraph</p> , if the encoding is set to true, will be displayed as <p>I'm a paragraph</p> , if false, I will give you a paragraph as my own paragraph, and the markup will be applied to the page.