javascript - How to add custom icon to JqGrid top-level toolbar button? - Stack Overflow

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 ?

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 ?

• javascript
• jquery
• jquery-ui
• jqgrid

Share Improve this question Follow edited May 23, 2017 at 12:04 CommunityBot 111 silver badge asked Aug 13, 2012 at 11:14 AndrusAndrus 28k6767 gold badges215215 silver badges396396 bronze badges 3

• Are you talking about replacing the icon for the x in the top-right corner of the dialog, or do you want to add a new clickable icon to the toolbar with it's own action? – Nope Commented Aug 13, 2012 at 11:28
• I want add new button with icon Images/calendar.png and custom action window.location = 'Report' – Andrus Commented Aug 13, 2012 at 11:38
• Your css of: ".ui-button.ui-state-hover .ui-icon.my-image" should be ".ui-button, .ui-state-hover, .ui-icon, .my-image" Update: I added more of an explanation in an answer below – jjay225 Commented Aug 13, 2012 at 12:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

Your css of

.ui-button.ui-state-hover .ui-icon.my-image

should be

 .ui-button, .ui-state-hover, .ui-icon, .my-image 

Why not try just have the class

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