This is a migrated thread and some comments may be shown as answers.

Icons in Toolbar and Context menu

2 Answers 581 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Robert Madrian asked on 14 Feb 2017, 12:46 PM

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-->

2 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 17 Feb 2017, 02:21 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 17 Feb 2017, 03:46 PM

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...

 

Tags
General Discussions
Asked by
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Ivan Zhekov
Telerik team
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Share this question
or