将 FontAwesome 集成到 KendoUI CSS [英] Integrating FontAwesome into KendoUI CSS

问题描述

我正在开发一个使用 ASP.NET MVC 和 Kendo UI 构建的站点.我正在尝试向显示在 Kendo UI 网格中的按钮添加自定义图标，但我被卡住了.

I'm working on a site that was built using ASP.NET MVC and Kendo UI. I'm trying to add a custom icon to a button that is displayed within the Kendo UI grid but I'm stuck.

这是网格中用于设置按钮的代码:

Here's the code in the grid to set up the button:

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

这是该按钮的 CSS:

Here's the CSS for that button:

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

这是我需要的 FontAwesome CSS(包含在项目中)中的类:

And here's the class in the FontAwesome CSS (which is included in the project) that I need:

fa fa-files-o

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

I'm not great with CSS, and it looks like when you use the Kendo classes, it creates a span with their icon in it. I like the FA icon better anyway, hoping someone can point me in the right direction.

推荐答案

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

You can set it by using the font awesome unicode provided for that icon and putting it in the after psuedo element, just like how font awesome puts their icons on elements. You can find the unicode when looking at the icon details. Here is the fa-files-o one: http://fontawesome.io/icon/files-o/

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

这篇关于将 FontAwesome 集成到 KendoUI CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！