Jak dodać fajną czcionkę do menu Kendo UI MVC?

Question

Próbuję dodać ikonę niesamowite czcionki do menu ASP.NET UI kendo. Niestety nie mogę znaleźć przykładu w Kendo, jak to zrobić. Kod jest następujący:

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

      }) 
      ) 

Czy ktoś wie, jak mogę dodać font-awesome ikonę przed. Tekst ("Konto"); ?

Answer 1

To wydawało się działać dla mnie z przykładowym projektem.

Jeżeli zmienisz .text ("Konto")

W tym

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

To powinno pokazać następnie strzałkę w górę obok Konta. (Oczywiście zmienić Awesome elementu czcionki do jednego, że chcesz

zmienił. Dodałem następujące próbki dla was pokazując to działa na wielu poziomach i dodanie fontu na poziomie dziecka

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

Powód do ustawiania .Encoded (fałszywego) jest tak, że silnik renderowania tylko przekazuje dane i zakłada, że ​​jest bezpieczny kod pisać to równowartość robi

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

Po ustawieniu go na true system traktuje przychodzący tekst jako ciąg znaków i nie próbuje interpretować tekstu, a następnie stosuje jakiekolwiek rozpoznawanie "html/javascript", np. <p>I'm a paragraph</p>, jeśli kodowanie jest ustawione na true, renderowałoby się jako <p>I'm a paragraph</p>, jeśli wartość false dałaby Jestem akapitem, ponieważ jest to własny akapit, a znacznik zostanie zastosowany do strony.