jqGrid:Font Awesome Icons

Question

I am trying to use Font Awesome icons in place of the jqueryUI icons for the toolbar in my jqGrid (add,edit,delete,view icons).

This demo is exactly what I would li

Answer 1

For custom buttons, here is quick and... work around:

$(grid).jqGrid('navButtonAdd', pager, {
        buttonicon: 'none',
        caption: ' My Caption Here',
        id: 'btnMyButton'
    })

if you need to change the caption dynamically, update the div (representing the button) html (not text):

var myButton = $($(grid)[0].p.pager + '_left ' + 'td#btnMyButton');
$(myButton ).html(' My NEW Caption Here');

I included a css class, .my-fa-icon, just in case you want to add some customization (and make the display closer to what jqGrid does) - for example, you can add this to your css file:

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button .ui-pg-div span.my-fa-icon { margin: 0 2px; width: 1.4em; font-size: 1.4em; float: left; overflow: hidden; }