使用助手的Kendo MVC网格自定义命令字体真棒图标

Posted 2023-02-16

我遇到了问题。我正在使用Kendo MVC并希望在Grid Custom命令中显示字体真棒图标。我为Edit，Delete和Detail定义了Grid Custom Commands。

columns.Command(command =>

    command.Custom("Edit").Action("Edit", "User");
    command.Custom("Details").Action("Details", "User");
    command.Custom("Delete").Action("Delete", "User");

请查看以下屏幕截图。我想使用MVC Helper扩展方法自动添加fa fa-edit和其他图标。

答案

可以覆盖编辑/详细信息/删除命令按钮的CSS，这使您可以选择为所有页面应用相同的样式，或者仅为一个，例如：

.k-grid-content .k-button.k-grid-edit::before 
    content: "\f044" !important;

.k-grid-content .k-button.k-grid-delete::before 
    content: "\f1f8" !important;

当网格转换（放入edit模式后）：

.k-grid-content .k-button.k-grid-update::before 
    content: "\f044" !important;

.k-grid-content .k-button.k-grid-cancel::before 
    content: "\f1f8" !important;

这是一个完整的Dojo example和all Font Awesome icons along with their CSS values。