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

Font awesome icons in Kendo Toolbar not visible

10 Answers 654 Views
Toolbar
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 10 Feb 2017, 11:38 AM

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

10 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 14 Feb 2017, 03:01 PM
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.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 15 Feb 2017, 01:18 PM

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;
}
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 15 Feb 2017, 05:04 PM

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

robert

0
Magdalena
Telerik team
answered on 16 Feb 2017, 11:05 AM
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.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 16 Feb 2017, 11:14 AM

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)

0
Magdalena
Telerik team
answered on 17 Feb 2017, 10:01 AM
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.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 17 Feb 2017, 12:01 PM

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

 

 

 

0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 17 Feb 2017, 12:16 PM

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

there is a Problem with the k-Icon CSS class

0
Accepted
Magdalena
Telerik team
answered on 17 Feb 2017, 03:07 PM
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.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 17 Feb 2017, 04:12 PM

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;
}
Tags
Toolbar
Asked by
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Magdalena
Telerik team
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Share this question
or