Use FontAwesome Icons

The example below demonstrates how to include custom FontAwesome icons in the Kendo UI Menu

Example

    <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.