Icons in Toolbar and Context menu

3 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    225 posts
    Member since:
    Apr 2003

    Posted 14 Feb 2017 Link to this post

    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. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    654 posts

    Posted 17 Feb 2017 Link to this post

    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.
  3. Robert Madrian
    Robert Madrian avatar
    225 posts
    Member since:
    Apr 2003

    Posted 17 Feb 2017 in reply to Ivan Zhekov Link to this post

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

     

Back to Top