CssClass on Menu from DataSource

[Tim]

I am trying to attach a Home Icon to my Menu (which is loaded remotely from a dataSource), and am trying to find out how to display the icon centered similar to the <span> tags would in the <li>. The icon displays, but appears above any text or drop arrow.

Here is the syntax inside the HTML body after loading kendo and bootstrap:

<ul id="settingsmenu" />
<script>
  $(document).ready(function() {
    $("#settingsmenu").kendoMenu({
      dataSource: [
        {   text: "", cssClass: "glyphicon glyphicon-home", items: []}
      ]
    });
  });
</script>

 

Any ideas as to how to get Text, Icon, and Arrow lined up properly, assuming it could just be a styling issue? I am relatively new as how to setup styles, so can't figure this out for myself. Might this be a case where I would need to create a Kendo Template for how these appear as an alternative?

 

Thanks!

[Dimo]

Hello Tim,

Please inspect the Menu's HTML markup with a DOM inspector and check if there are background-position styles applied by your custom CSS classes. Then, add or modify these styles in order to move the background image to the desired location in the Menu items.

Regards,
Dimo
Telerik