在带有 CSS 的 Kendo 网格按钮中使用 Font Awesome

Question

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

我可以使用 HtmlAttributes 添加 class 并且效果很好。

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

但为了避免重复，我想使用 CSS。 Kendo 网格添加一个带有自定义按钮名称的 class，例如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 网格按钮中使用 Font Awesome

Using Font Awesome in Kendo Grid buttons with CSS

css

kendo-ui

kendo-grid

font-awesome