CODEWITHSUNDEEP
csskendo-uikendo-gridfont-awesome
Akbari
Akbari

Reputation: 2409

Using Font Awesome in Kendo Grid buttons with CSS

I want to use Font Awesome for certain buttons inside Kendo Grids.

I can use the HtmlAttributes to add the class and it works fine.

command.Custom("name").Text(" ").Click("handler").HtmlAttributes(new { @class = "fa fa-file-text" });

But to avoid repetition, I'd like to use CSS. Kendo Grid add a class with the name of the custom button to it, e.g. k-grid-name. The end DOM looks like this:

<a class="k-button k-button-icontext k-grid-name" href="#"><span class="fa fa-check"></span> </a>

The CSS selector that I'm trying is:

.k-grid-name{
    font-family: FontAwesome;
    content: "\f000";
}
.k-grid-name a:before {
    font-family: FontAwesome;
    content: "\f000";
}
.k-grid-name span{
    background-color: red;
}

I prefer to use the inside span, because it's in the center of the button. What's the correct selector for that?

Upvotes: 2

Views: 2284

Answers (3)

LawMan
LawMan

Reputation: 3625

Here' my solution. Register the dataBound callback with this..

    const dataBound =(e) => {
        $(".k-button.k-button-icontext.k-grid-custombtnname ").append("<span title='View Request'><i class='fas fa-search'></i></span>");
    }

Upvotes: 0

John81
John81

Reputation: 4074

This worked for me. Replace "custombuttonname" with the name of the custom grid button.

.k-grid-content .k-button.k-grid-custombuttonname::before {
    font-family: 'FontAwesome' !important;
    content: "\f000" !important;
}

Upvotes: 0

Dion D.
Dion D.

Reputation: 2596

try this

.k-grid-custombtnname span:before {
    font-family: 'FontAwesome';
    content: "\f00c";
}

Upvotes: 2

Related Questions