Icons in Toolbar and Context menu

[Robert Madrian]

Hi,

I have the Problem that no Icon (glyphicon or Kendo icon) is shown with "SpriteCssClasses " in Toolbar and Context menu (see attached Pictures)

 

<!--ContextMenu-->
    @(Html.Kendo().ContextMenu()
      .Name("ctmStandort")
      .Target("#grdStandort").Filter("button").AlignToAnchor(true).ShowOn("click")
      .Orientation(ContextMenuOrientation.Vertical)
      .Animation(false)
      .Items(items =>
      {
          items.Add()
              .Text("Öffnen");
          items.Add()
              .Text("Neu").SpriteCssClasses("glyphicon glyphicon-plus")
              .Items(children =>
              {
                  children.Add().Text("Akt hinzufügen");
                  children.Add().Text("Profil hinzufügen");
              });
          items.Add()
              .Text("Stammblatt").SpriteCssClasses("k-icon k-i-print k-i-printer")
              .Items(children =>
              {
                  children.Add().Text("Intern");
                  children.Add().Text("Intern-Selbstdefiniert");
                  children.Add().Separator(true);
                  children.Add().Text("Extern");
                  children.Add().Text("Extern-Selbstdefiniert");
              });
          items.Add()
              .Text("Löschen").SpriteCssClasses("k-icon k-i-table-row-delete").Enabled(true);
      })
    )
    <!--End ContextMenu-->

[Ivan Zhekov]

Hi.

Examine the following dojo -- http://dojo.telerik.com/@joneff/aGEwI. Note the style declaration:

.k-sprite.k-icon {
  font-size: 16px;
}

and the icon property of the toolbar button.

Basically, we have styles for "k-sprite" that set font size equal to 0 pixels and that's why you don't see the icons. The above styles "reset" that rule.

The icon property sets the correct class name, if you want to use the built-in icons. We'll make it available to more components, not only the toolbar and regular buttons.

Note: if the default font size for glyphicons is not 16 pixels, but say 14, you need to modify the snippet:

.k-sprite.glyphicon  {
    font-size: 14px;
}

Regards,
Ivan Zhekov
Telerik by Progress

[Robert Madrian]

Hi Ivan

I have a similar post here: http://www.telerik.com/forums/font-awesome-icons-in-kendo-toolbar-not-visible

so this can be closed...