Display SpriteClass using Font-Awesome in Kendo Panel Bar

I'm having a trouble on displaying <i> in Kendo Panel Bar cause it only uses <span> and <img>

Is it possible to use Font Awesome in Kendo Panel Bar?

Code for displaying <span>

<div class="demo-section k-content">

            <h4>PanelBar with sprites</h4>

            <div id="panelbar-sprites"></div>

        </div>

        <script>
            $("#panelbar-sprites").kendoPanelBar({
                dataSource: [{
                        text: "Brazil", spriteCssClass: "brazilFlag", items: [
                            { text: "History", spriteCssClass: "historyIcon" },
                            { text: "Geography", spriteCssClass: "geographyIcon" }
                        ]
                    },
                    {
                        text: "India", spriteCssClass: "indiaFlag", items: [
                            { text: "History", spriteCssClass: "historyIcon" },
                            { text: "Geography", spriteCssClass: "geographyIcon" }
                        ]
                    },
                    {
                        text: "Netherlands", spriteCssClass: "netherlandsFlag", items: [
                            { text: "History", spriteCssClass: "historyIcon" },
                            { text: "Geography", spriteCssClass: "geographyIcon" }
                        ]
                    }]
            });
        </script>

Here is an example dojo using random font awesome sprites example dojo

All you need to do is include the font awesome css (either locally or from the cdn) and then using the font awesome naming convention e.g. fa fa-circle-stop etc it will be included as part of the header.

The example you have provided I assume is from the demo site and if you look further down (in the css declaration section) you will see that it loads a sprite file and then absolute positions the images for the flags.

If you need any more info then let me know.