KendoUI TreeList更改展开/折叠图标

Question

Im trying to change the default expand/collapse icons to bigger icons. I've set the following css change which doesnt seem to be taking any effect:

.k-treelist .k-minus {        
     background: url('../img/Misc/customCollapsedIcon.png') center center;
}

.k-treelist .k-plus {
    background: url('../img/Misc/customExpandedIcon.png') center center;
 }

Can anyone give me some advice on what I need to change for this to take affect on the TreeList?

Answer 1

Try specifying the exact height and width for each new icon, in these CSS rules.

If that doesn't work, make sure that other CSS rules aren't overriding these rules.

Answer 2

with the 2016 Q1 version you need to use

.k-treelist .k-i-expand{
background: url("/Content/...") center center no-repeat // i'm on an asp.net web app
}
.k-treelist .k-i-collapse{
background: url("/Content/...") center center no-repeat
}

i was using font awesome icons so i had to go to http://fa2png.io/ and convert chevron-right to a png and save it 16x16