2015-04-21 23 views
6

Sto provando ad aggiungere un'icona impressionante di carattere in un menu ASP.NET di interfaccia utente di Kendo. Sfortunatamente non riesco a trovare un esempio al Kendo su come farlo. Il codice è il seguente:Come aggiungere un'icona font-awesome al menu KI UI MVC?

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

      }) 
      ) 

Qualcuno sa come potrei aggiungere un'icona font-impressionante prima della .Text ("Account"); ?

risposta

6

Questo sembrava funzionare per me con un progetto di esempio.

Se si cambia la .Text ("Account")

Per questo

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

Questo dovrebbe quindi mostrare una freccia accanto a Account. (Ovviamente cambiare l'elemento impressionante di carattere per quello che si desidera

edit:. Ho aggiunto il seguente esempio per mostrare questo lavoro a più livelli e l'aggiunta del carattere a livello di bambino

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

La ragione per l'impostazione .Encoded (false) è così che il motore di rendering passa solo i dati e non si assume è il codice di sicurezza di scrivere è l'equivalente di fare

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

Impostandolo su true il sistema tratta semplicemente il testo in entrata come una stringa e non tenta di interpretare il testo e quindi applica qualsiasi riconoscimento "html/javascript" es. <p>I'm a paragraph</p> se la codifica è impostata su true verrà visualizzata come <p>I'm a paragraph</p> se false fornirebbe il Sono un paragrafo in quanto è proprio paragrafo e il markup verrebbe applicato alla pagina.

+0

Sembra che non piaccia il .Encode Visual Studio dice "Impossibile risolvere il simbolo 'Codifica'. L'ho rimosso, ma poi tutto ciò che fa è mostrare il codice all'interno di .Text (" '), invece del font fantastico icona. – Justin

+0

Modificato .encode da codificare, funziona come un incantesimo! Grazie! Apprezzo il vostro aiuto! – Justin

+0

Ho due domande rapide, qual è lo scopo del .encoded? Inoltre, quando aggiungo il .encoded alle notifiche, esso presenta errori su .items e .add. Non sembra gradire i bambini all'interno del menu. – Justin

Problemi correlati