将 FontAwesome 集成到 KendoUI CSS

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（包含在项目中）中的 class：

fa fa-files-o

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

Answer 1

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

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

Answer 2

我同意上面的回答，请确保您的标记中包含字体真棒 css 文件。

Answer 3

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

客户端模板包含相关代码 - 带有 bootstrap 按钮的锚标记和用于 fontawesome 图标的 <i/>。如果需要，我可以在右侧添加像 "Edit" 这样的文本。

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

.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.

将 FontAwesome 集成到 KendoUI CSS

Integrating FontAwesome into KendoUI CSS

html

css

kendo-ui

kendo-asp.net-mvc