将字体真棒图标放在Kendo TabStrip选项卡中作为图像

Question

我正在尝试利用FA在我的每个标签名称旁边放置图标，但不知道如何解决这个问题，我知道有ImageUrl但不知道如何使用字体。

@(Html.Kendo().TabStrip()
 .Name("tabstripMain")
 .Items(tabstripMain =>
 {
    tabstripMain.Add().Text("<i class='fa fa-anchor'></i> Summary")
 })

任何帮助将不胜感激， 谢谢

Answer 1

有一种更简单的方法可以做到这一点。

确保页面中引用了字体真棒样式表。

然后这里是使用字体真棒图标添加tabstrip的剃刀语法：

@(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip => {
              tabstrip.Add().Text("Area Chart")
                  .SpriteCssClasses("fa fa-area-chart")
                  .Content(@<text>
                        <div style="height:300px"> <h3>Area Chart</h3></div>
                    </text>);
              tabstrip.Add().Text("Bar Chart")
                  .SpriteCssClasses("fa fa-bar-chart")
                  .Content(@<text>
                    <div style="height:300px"> <h3>Bar Chart</h3></div>
                </text>);
          })

）

请注意，我正在使用SpriteCssClasses方法为tabstrip图标设置CSS类。如果要指定类列表，SpriteCssClasses也会采用字符串数组。在这个例子中，我刚刚给出了完整的类“fa fa-area-chart”作为单个字符串，它也是有效的。

以下是上述代码的输出：

希望这有帮助。