Font awesome icons in Kendo Toolbar not visible

[Robert Madrian]

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

[Magdalena]

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

[Robert Madrian]

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

[Robert Madrian]

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

robert

[Magdalena]

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

[Robert Madrian]

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)

[Magdalena]

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

[Robert Madrian]

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

 

 

 

[Robert Madrian]

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

there is a Problem with the k-Icon CSS class

[Magdalena]

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

[Robert Madrian]

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