在 Kendo 面板栏中使用 Font-Awesome 显示 SpriteClass

Question

我在 Kendo 面板栏中显示 <i> 时遇到问题，因为它只使用 <span> 和 <img>

是否可以在 Kendo 面板栏中使用 Font Awesome？

显示代码<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>

Answer 1

这是一个使用随机字体真棒精灵的道场示例 example dojo

您需要做的就是包含 awesome 字体 css（本地或来自 cdn），然后使用 awesome 字体命名约定，例如fa fa-circle-stop 等它将作为 header 的一部分包含在内。

我假设您提供的示例来自演示站点，如果您进一步向下看（在 css 声明部分），您会看到它加载了一个 sprite 文件，然后绝对定位图像旗帜。

如果您需要更多信息，请告诉我。