Font Awesome + kendo webcomponent glyph conflict

[ashutosh]

I have both the glyph fonts installed and used in my MVC.net web application, some of the contents in classes are common e.g. e005 is used for different icon in kendo and for different icon in font-awesome. 

.k-i-arrow-60-right:before {
content: "\e005";
}

so by default above class should show me an arrow icon, it shows faucets icon from font-awesome.

to overcome this, i need to specify the font-file for every such class

 

.k-i-arrow-60-right:before {
content: "\e005";
font-family: WebComponentsIcons;
}

 

i want to avoid this.

 

any help will be appriciated.

[Stoyan]

Hi Ashutosh,
Thank you for your inquiry.

This behavior is caused because beforehand the font-family is set implicitly or explicitly to

 .k-i-arrow-60-right {
         font-family: "Font Awesome 5 Free"; 
}

The Kendo Web Font Icons all have the .k-icon class. You can use it to override the font-family of all icons

 .k-icon{
           font-family: WebComponentsIcons;
 }

 

I hope the above is helpful. Please let me know, if you have further questions.

Regards,
Stoyan
Progress Telerik