Font awesome icons in Kendo Toolbar not visible

11 posts, 1 answers
  1. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 10 Feb Link to this post

    Hi,

    I have the following Toolbar but all the Font awesome Icons are invisible?

    adding the style as discribed in the docs doesn't help...

    .fa.k-sprite,
        .fa.k-sprite::before {
            font-size: 12px;
            line-height: 12px;
        }

     

    @(Html.Kendo().ToolBar()
              .Name("tlbStandort")
              .Items(items =>
              {
                  items.Add().Type(CommandType.SplitButton).Text("Neu").SpriteCssClass("fa fa-plus").MenuButtons(menuButtons =>
                  {
                      menuButtons.Add().Text("Fachgruppenzugeörigkeit").SpriteCssClass("fa fa-plus");
                      menuButtons.Add().Text("Telekomverbindung").SpriteCssClass("fa fa-plus");
                      menuButtons.Add().Text("Zusendung").SpriteCssClass("fa fa-plus");
                  });
                  items.Add().Type(CommandType.Separator);
                  items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
                  {
                      buttons.Add().Id("toolStandorteFilter_Alle").Text("Alle").Togglable(true).Group("Filter").Selected();
                      buttons.Add().Id("toolStandorteFilter_Active").Text("Aktive").Togglable(true).Group("Filter").SpriteCssClass("fa fa-filter");
                      buttons.Add().Id("toolStandorteFilter_Geloeschte").Text("Gelöschte").Togglable(true).Group("Filter").SpriteCssClass("fa fa-filter");
                  });
                  items.Add().Type(CommandType.Button).Id("ExpandCollapse").SpriteCssClass("fa fa-indent").Togglable(true); ;
              })
        )
  2. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 14 Feb Link to this post

    Hello Robert ,

    Thank you for the provided snippets. We have copied your code to an empty sample project, and have referred font-awesome.css to the page and it works properly on our side. We are sending you this video for your reference.

    If the issue still persists, check if the path in the CSS reference is correct.

    Do not hesitate to contact us if you have other questions.

    Regards,
    Magdalena
    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
    163 posts
    Member since:
    Apr 2003

    Posted 15 Feb in reply to Magdalena Link to this post

    It is weird, I want to use k-icon, fa and glyphicon and have added this styles, it works in contextmenu but not in Toolbar (see Picture)

    fa icons are invisible and glyphicons are very small in the toolbar - I use material theme

    .fa.k-sprite, .fa.k-sprite::before {
        font-size: 16px !important;
        line-height: 16px !important;
        padding-right: 3px;
    }
     
    .k-icon.k-sprite, .k-icon.k-sprite::before {
        font-size: 16px !important;
        line-height: 16px !important;
        padding-right: 3px;
    }
     
    .glyphicon.k-sprite, .glyphicon.k-sprite::before {
        font-size: 16px !important;
        line-height: 16px !important;
        padding-right: 3px;
    }
  4. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 15 Feb in reply to Robert Madrian Link to this post

    Hi, and another Problem is the line break (see attached Picture)

    robert

  5. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 16 Feb Link to this post

    Hi Robert,

    We have tried to simulate your scenario, but the issue is not reproduced on our side. We are sending you this screenshot for your reference.

    Could you please provide us with all CSS that you are applying, and code snippets that are necessary for reproducing the issue locally?

    We also highly recommend to avoid using !important in CSS rules. It better to use it only if it is necessary, for example if you would like to overwrite some inline styles. In other cases the better way is to increase your selectors, for example by adding "html", other class name, or id. So for example 
    .fa.k-sprite,
    .fa.k-sprite::before {}

     will be 
    html .fa.k-sprite,
    html .fa.k-sprite::before {}


    Regards,
    Magdalena
    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.
  6. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 16 Feb in reply to Magdalena Link to this post

    please test it with material theme not the Standard theme - especially the line break problem seems to be with material theme

    I have removed the !important CSS rule - now it works for Kendo Icons (k.icons)

  7. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 17 Feb Link to this post

    Hello Robert,

    We have test the scenario also with applied Material skin, but the issue is still not reproduced. We are sending you this video for your reference.

    We run the following Toolbar and Menu configuration:
    @(Html.Kendo().ToolBar()
        .Name("tlbStandort")
        .Items(items =>
        {
            items.Add().Type(CommandType.SplitButton).Text("Neu").SpriteCssClass("fa fa-plus").MenuButtons(menuButtons =>
            {
                menuButtons.Add().Text("Fachgruppenzugeörigkeit").SpriteCssClass("fa fa-plus");
                menuButtons.Add().Text("Telekomverbindung").SpriteCssClass("fa fa-plus");
                menuButtons.Add().Text("Zusendung").SpriteCssClass("fa fa-plus");
            });
            items.Add().Type(CommandType.Separator);
            items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
            {
                buttons.Add().Id("toolStandorteFilter_Alle").Text("Alle").Togglable(true).Group("Filter");
                buttons.Add().Id("toolStandorteFilter_Active").Text("Aktive").Togglable(true).Group("Filter").SpriteCssClass("fa fa-filter");
                buttons.Add().Id("toolStandorteFilter_Geloeschte").Text("Gelöschte").Togglable(true).Group("Filter").SpriteCssClass("fa fa-filter");
            });
            items.Add().Type(CommandType.Button).Id("ExpandCollapse").SpriteCssClass("fa fa-indent").Togglable(true); ;
        })
    )
     
    @(Html.Kendo().Menu()
        .Name("MyMenu")
        .Items(items => {
            items.Add()
                .Text("Item")
                .SpriteCssClasses("fa fa-filter")
                .Items(children => {
                    children.Add()
                        .Text("Neu")
                        .SpriteCssClasses("fa fa-plus");
                    children.Add()
                        .Text("Stammblatt")
                        .SpriteCssClasses("fa fa-plus")
                        .Items(children1 => {
                            children1.Add()
                                .Text("Item");
                        });
                    children.Add()
                        .Text("Loschen")
                        .SpriteCssClasses("fa fa-plus");
                });
        })
    )

    Using the following CSS:
    .fa.k-sprite,
    .fa.k-sprite::before {
        font-size: 12px;
        line-height: 12px;
    }
     
    .fa.k-sprite, .fa.k-sprite::before {
        font-size: 16px;
        line-height: 16px;
        padding-right: 3px;
    }
      
    .k-icon.k-sprite, .k-icon.k-sprite::before {
        font-size: 16px;
        line-height: 16px;
        padding-right: 3px;
    }
      
    .glyphicon.k-sprite, .glyphicon.k-sprite::before {
        font-size: 16px;
        line-height: 16px;
        padding-right: 3px;
    }

    Could you please check if there is missing something important for reproducing the issue? Looking forward to your reply.

    Regards,
    Magdalena
    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.
  8. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 17 Feb in reply to Magdalena Link to this post

    this is weird

    the menu is working now but in the toolbar there is the following Problem - see this Video: https://www.screencast.com/t/LjylYvJy

    this is the HTML for the Icon:

    <span class="k-sprite k-icon fa fa-filter"></span>

     

    and this seems to be the Problematik css "font: 16px/1 WebComponentsIcons;":

    .k-font-icon, .k-font-icon.k-icon, .k-font-icon.k-tool-icon, .k-icon {
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 1em;
        height: 1em;
        text-align: center;
        vertical-align: middle;
        background-image: none;
        font: 16px/1 WebComponentsIcons;
        font-variant: normal;
        text-transform: none;
        text-indent: 0px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: visible;
    }

     

     

     

  9. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 17 Feb in reply to Robert Madrian Link to this post

    see also: https://www.screencast.com/t/13Wb3ur6lmu

    there is a Problem with the k-Icon CSS class

  10. Answer
    Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 17 Feb Link to this post

    Hi Robert,

    Thank you for the provided video. We have succeeded to reproduce almost the same issue, after we reordered CSS references. Could you try, if the issue persist when Font Awesome styles are added after Kendo styles? Hoping this solution will resolve the issue.

    Looking forward to your reply.

    Regards,
    Magdalena
    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.
  11. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 17 Feb in reply to Magdalena Link to this post

    Hi,

    moving the following Styles after Kendo styles it works (bootstrap for glyphicons):

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />

     

    and I use this for Setting the size:

    .k-sprite.fa {
        font-size: 16px;
        line-height: 16px;
        padding-right: 6px;
    }
     
    .k-sprite.k-icon {
        font-size: 16px;
        line-height: 16px;
        padding-right: 6px;
    }
     
    .k-sprite.glyphicon {
        font-size: 16px;
        line-height: 16px;
        padding-right: 6px;
    }
Back to Top