Use FontAwesome Icons in the Menu
Environment
| Product | Progress® Kendo UI® Menu for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I include custom FontAwesome icons in the Kendo UI for jQuery Menu?
Solution
The example below demonstrates how to achieve the desired scenario.
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<h3>Menu with font awesome icons</h3>
<div id="menu"></div>
<script>
$("#menu").kendoMenu({
dataSource: [{
text: "Brazil", spriteCssClass: "fa fa-male", items: [
{ text: "History", spriteCssClass: "fa fa-map-marker" },
{ text: "Geography", spriteCssClass: "fa fa-tablet" },
]},
{ text: "India", spriteCssClass: "fa fa-glass", items: [
{ text: "History", spriteCssClass: "fa fa-flag-checkered" },
{ text: "Geography", spriteCssClass: "fa fa-picture-o" },
]},
{ text: "Netherlands", spriteCssClass: "fa fa-camera-retro", items: [
{ text: "History", spriteCssClass: "fa fa-film" },
{ text: "Geography", spriteCssClass: "fa fa-leaf" },
]}
]});
</script>
<style>
.k-sprite {
text-indent: 0;
font-size: 1em;
}
</style>