Integrating FontAwesome into KendoUI CSS

问题:

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" });

Here's the CSS for that button:

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

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

fa fa-files-o

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.

回答1:

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;
}

回答2:

Looks like you are using the MVC wrappers. In that case, what I do is use a column template.

The client template contains the relevant code - an anchor tag with bootstrap buttons and an <i/> for the fontawesome icon. I could add text like "Edit" to the right of this if desired.

Note that this is an edit button on a kendo grid so I include the class k-grid-edit on the anchor so that kendo will perform the edit action. There are other classes for the standard grid actions like k-grid-add, k-grid-delete, k-grid-excel, etc. For something custom you can use your own selector or add onclick to the anchor and remove the unneeded 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>");

With this technique you will not see the Kendo default icons - just the fa.

回答3:

I agree with the answer above, just be sure you have the font awesome css file included in your markup.