1

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>
Yuu
  • 619
  • 3
  • 13
  • 34

1 Answers1

1

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.

David Shorthose
  • 4,489
  • 2
  • 13
  • 12
  • Hi! It will still display as boxes and it still uses `` of course.. but whenever I change it as `` (in inspect element) the icon will display – Yuu Jan 25 '16 at 01:04
  • Hi! @David Thanks I already get it. I had an error in my `css` that the metroui will override the font-awesome – Yuu Jan 25 '16 at 01:29