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

Question

I'm trying to add a font awesome icon into a kendo UI ASP.NET Menu. Unfortunately I can't find an example at Kendo on how to do it. 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 could add a font-awesome icon before the .Text("Account"); ?

David Shorthose · Accepted Answer · 2015-04-22T09:59:35.063

This seemed to work for me with a sample project.

If you change the .Text("Account")

To this

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

That should then show an arrow up next to Account. (Obviously change the Font Awesome element to one that you want.

edit: I have added the following sample for you showing this working at multiple levels and adding the font's at the 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 so that the rendering engine just passes the data and assumes it is safe code to write out it is the equivalent of doing

@Html.Raw(" some html here")

By setting it to true the system just treats the incoming text as a string and doesn't try to interpret the text and then apply any "html/javascript" recognition eg. I'm a paragraph if encoding is set to true would render out as I'm a paragraph if false would give you the I'm a paragraph as it's own paragraph and the markup would be applied to the page.

Seems to not like the .Encode Visual Studio says "Cannot resolve symbol 'Encode'. I removed it, but then all it does is show the code within the .Text("'), instead of the font awesome icon. — Justin, Apr 21 '15 at 18:52
Changed .encode to encoded, works like a charm! Thanks! I appreciate your help! — Justin, Apr 21 '15 at 18:53
I have a 2 quick questions, what is the purpose of the .encoded? Also, when I add the .encoded to notifications it errors out on .items and .add. It doesn't seem to like the children within the menu. — Justin, Apr 21 '15 at 18:59
I added some sample code for you to test out (I am using glyphicon's rather than Font Awesome so sub out as required). This is a quick piece of proof of concept code and has been tested just to make sure the glyphs are showing correctly. — David Shorthose, Apr 22 '15 at 09:59

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

1 Answers1