Question

我想对Kendo Grids中的某些按钮使用Font Awesome。

我可以使用HtmlAttributes添加课程，但效果很好。

command.Custom("name").Text(" ").Click("handler").HtmlAttributes(new { @class = "fa fa-file-text" });

但为了避免重复，我想使用CSS。 Kendo Grid为其添加一个带有自定义按钮名称的类，例如k-grid-name。最终DOM看起来像这样：

<a class="k-button k-button-icontext k-grid-name" href="#"><span class="fa fa-check"></span> </a>

我正在尝试的CSS选择器是：

.k-grid-name{
    font-family: FontAwesome;
    content: "\f000";
}
.k-grid-name a:before {
    font-family: FontAwesome;
    content: "\f000";
}
.k-grid-name span{
    background-color: red;
}

我更喜欢使用内部span，因为它位于按钮的中心。这是正确的selector是什么？

Answer 1

试试这个

.k-grid-custombtnname span:before {
    font-family: 'FontAwesome';
    content: "\f00c";
}

Answer 2

这对我有用。将“ custombuttonname”替换为自定义网格按钮的名称。

.k-grid-content .k-button.k-grid-custombuttonname::before {
    font-family: 'FontAwesome' !important;
    content: "\f000" !important;
}

Answer 3

这是我的解决方案。使用此注册 dataBound 回调..

    const dataBound =(e) => {
        $(".k-button.k-button-icontext.k-grid-custombtnname ").append("<span title='View Request'><i class='fas fa-search'></i></span>");
    }

在CSS中使用Kendo Grid按钮中的Font Awesome

3 个答案: