将 Font Awesome 集成到 Kendo UI CSS 中

Posted 2023-05-07

【中文标题】将 Font Awesome 集成到 Kendo UI CSS 中

【英文标题】：Integrating FontAwesome into KendoUI CSS

【发布时间】：2017-09-05 20:45:33

【问题描述】：

我正在开发一个使用 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 图标，希望有人能指出我正确的方向。

【问题讨论】：

我刚刚发布了一个答案，但再看一遍我想知道为什么不将fa fa-files-o 类添加到按钮？

【参考方案1】：

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

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

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

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

【讨论】：

现在问题来了。如果我想根据一些 Razor Syntax If 语句隐藏客户端模板上的按钮。我该怎么做呢

剑道有它自己的hash syntax。

【参考方案2】：

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

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

【讨论】：

谢谢伙计，这太棒了。我也有这个专栏的“编辑”和“删除”按钮。我想对那些使用相同的东西。我尝试了您的代码，只是将“复制”更改为“编辑”和“删除”，并指向正确的图标，但剑道默认图标也会显示出来。您知道如何摆脱默认图标吗？

您需要进入浏览器检查器并查看图标的来源，然后将其隐藏或用 css 覆盖。

是的，背景图片。这些字形图标对我来说是个谜。你把我带到了我需要去的地方，疯狂的道具！

【参考方案3】：

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