Changing command.Edit() Kendo Icon to Custom Icon

2 posts, 0 answers
  1. Navin
    Navin avatar
    12 posts
    Member since:
    Dec 2012

    Posted 11 Sep 2013 Link to this post

    I know this is a very trivial solution however I can't seem to figure how to do this.

    Here is my scenario. 

    I have a grid with some columns, one of them being the built in kendo command.Edit() button. Now this button has a standard icon associated with it from kendo.

    What I am trying to do is change that icon to a custom icon that I have created. 

    The following allows me to do so with CSS however when I hover over it (right before I click) the icon is removed. I am looking for either the CSS to not remove the icon on hover or another viable solution. I do not want to change the command.Edit() to a custom command. 

    Here is the CSS

    .k-grid .k-edit 
    {
    background-position: 0 0 ;
    background-image: url('...');

    }

    Thanks
    Nav
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Sep 2013 Link to this post

    Hi Nav,

    I already answered to the same question in the support ticket (735602), however I am pasting a quote from my answer here, too:  

    The issue is caused by there is a CSS selector with a higher specificity. In order to achieve the expected result you could use the following selector:

    .k-grid .k-edit.k-icon {
        background-position: 0 0 ;
        background-image:url('//...');
    }
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top