Question

我正在使用ASP.NET MVC和Kendo UI构建的网站上工作。我试图将自定义图标添加到Kendo UI网格中显示的按钮，但是我被卡住了。

这是网格中设置按钮的代码：

command.Custom("copy")
    .Text(" ")
    .Click("copyNAddEvent")
    .HtmlAttributes(new { @class = "copy", title = "Copy this event" });

这是该按钮的CSS：

.k-grid .k-button.copy{
    min-width: 40px;
}

这里是我需要的FontAwesome CSS（包含在项目中）中的类：

fa fa-files-o

我对CSS不太满意，看起来当你使用Kendo类时，它会创建一个带有图标的跨度。无论如何，我更喜欢FA图标，希望有人能指出我正确的方向。

Answer 1

看起来你正在使用MVC包装器。在这种情况下，我所做的是使用列模板。

客户端模板包含相关代码 - 带有引导按钮的锚标记和用于fontawesome图标的<i/>。如果需要，我可以在此右侧添加“编辑”等文字。

请注意，这是kendo网格上的编辑按钮，因此我在锚点上包含类k-grid-edit，以便kendo将执行编辑操作。标准网格操作还有其他类，如k-grid-add，k-grid-delete，k-grid-excel等。对于自定义的东西，您可以使用自己的选择器或添加onclick到锚点并删除不需要的k -grid编辑。

.Columns(column =>
{
    column.Template(t => { }).Title("Edit").Width(10)
        .HtmlAttributes(new { style = "text-align: center;" })
        .HeaderHtmlAttributes(new { style = "text-align:center;", title = "Edit" })
        .ClientTemplate(@"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this item.'><i class='fa fa-edit'></i></a>");

使用这种技术，您将看不到Kendo默认图标 - 只是fa。

Answer 2

您可以使用为该图标提供的字体真棒unicode并将其放入after psuedo元素中来设置它，就像字体真棒如何将其图标放在元素上一样。查看图标详细信息时可以找到unicode。这是fa-files-o one：http://fontawesome.io/icon/files-o/

.k-grid .k-button.copy:after {
    content: '\f0c5'
    font-family: FontAwesome;
}

Answer 3

我同意上面的答案，只要确保你的标记中包含字体真棒css文件。

将FontAwesome集成到KendoUI CSS中

3 个答案: