Font awesome 5 (svg) in k-header not displaying

[Christina]

Hi,
I am in the progress of overwriting all kendo icons to font awesome 5 icons (svg), I I've ran into a problem. 
I am somehow unable to overwrite any icons that is in the k-header. The svg code is generated and visible in inspection mode, but is not shown in the window. I am able to convert any other icon (popup editor buttons, grid cells and so on.) 
Code for overwriting

.k-icon.k-i-close:before {
    display: none;
    content: "\f00d";
    font-family: "Font Awesome 5 Regular";
}

Generated code (inspection mode)

<span class="k-icon k-i-close">
  <svg class="svg-inline--fa fa-times fa-w-12" data-fa-pseudo-element=":before" aria-hidden="true" data-prefix="far" data-   icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
    <path fill="currentColor" d="M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192    216.4  61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z"></path>
  </svg>
    <!-- <i class="far" data-fa-pseudo-element=":before"></i> -->
</span>

 

When using the same css on the button in the same popup editor, the icon is displayed perfectly, and it generates the exact same html.

Code for button icon (working)

.k-icon.k-i-cancel:before {
    display: none;
    content: "\f00d";
    font-family: "Font Awesome 5 Regular";
}

Generated code (working)

<span class="k-icon k-i-cancel">
    <svg class="svg-inline--fa fa-times fa-w-12" data-fa-pseudo-element=":before" aria-hidden="true" data-prefix="far" data-icon="times" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
        <path fill="currentColor" d="M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z"></path>
    </svg>
    <!-- <i class="far" data-fa-pseudo-element=":before"></i> -->
</span>

 

Is there something special about the k-header tag that is preventing the icon to be shown, even though the code is generated?

I created a dojo demonstrating my issue: https://dojo.telerik.com/ODIvUfeq/4

 

Kind regards,

Christina

[Orlin]

Hello Christina,

In this case the cause for the behavior is the text indent of the icons. If you would add the following CSS rule to your styles, it should take care of the missing icons for you:

.k-button.k-button-icon .k-icon,
.k-grid-filter .k-icon,
.k-header .k-icon {
   text-indent: 0;
}

You can see it in action here: https://dojo.telerik.com/ODIvUfeq/5

I hope this helps.

Regards,
Orlin
Progress Telerik