Use FontAwesome Icons
The example below demonstrates how to include custom FontAwesome icons in the Kendo UI Menu
<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>
See Also
- Menu JavaScript API Reference
- How to Create Split Button
- How to Execute Custom Click Actions Based on Class Name
For more runnable examples on the Kendo UI Menu, browse the How To documentation folder.