Question

I have used the info here to add a custom button in JqGrid top level toolbar using code below in IE9.

Caret icon appears instead of image. IE9 network tab shows that request for Images/calendar.png is not issued.

   $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        caption: '',
        id: "grid_mybutton",

        buttonicon: 'my-image',
        onClickButton: function () { 
            window.location =  'Report';
          }
    });

css file:

.ui-button .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16;  
} 

.ui-button.ui-state-hover .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16;  
} 

How to add custom icon ?

Answer 1

The jQuery styles will always over-write your styles as they are applied last.

In addition to what jjay225 pointed out ones you fixed your references, add the !important tag to your image style to ensure it is always applied.

Try it out in the below demo, remove the !important, and you get the ^, add it again and you get your image.

See DEMO

Not having your full code I simply added an icon to the toolbar with jQuery append() and added the required CSS.

Using any debugging tool though, i.e: FireBug in FF and the build-in ones in Chrome or IE, you can check the exact class/id values of your new icon and fix any css reference issues you may have.