在带有 CSS 的 Kendo Grid 按钮中使用 Font Awesome答案

【问题标题】：Using Font Awesome in Kendo Grid buttons with CSS在带有 CSS 的 Kendo Grid 按钮中使用 Font Awesome
【发布时间】：2015-06-29 03:43:07
【问题描述】：

我想为 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 是什么？

【问题讨论】：

标签： css kendo-ui kendo-grid font-awesome

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>");
    }

【讨论】：