Estoy tratando de usar iconos de Font Awesome en lugar de los iconos jqueryUI para la barra de herramientas en mi jqGrid (agregar, editar, eliminar, ver iconos).

Esta Demo es exactamente lo que me gustaría lograr. He leído de olegresponder eso demuestra la eliminación de la clase de iconos y la adición de los iconos de Font Awesome en su lugar. Pero cuando trato de hacer eso nada cambia. Creo que posiblemente estoy haciendo referencia a los iconos mal.

Descargué Font Awesome 4.0.3 y tengo jqGrid 4.5.4 - En el archivo _icons.scss del árbol de archivos FA se hace referencia a los iconos de esta forma:

.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }

Pero en el código sugerido de Oleg, los nuevos íconos están etiquetados como "icon-pencil":

$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
        addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
        refreshicon: "icon-refresh", viewicon: "icon-file",view: true});

$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");

Este es mi código: solo hice el ícono de edición para este ejemplo. También usé la nueva etiqueta para los iconos, "fa-pencil".

jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true});

$('#grid_toppager .navtable .ui-pg-div>span').removeClass('ui-icon'); 

¿Qué combinación de código necesito para reemplazar los iconos ui con los iconos de Font Awesome?

Cualquier consejo útil sería apreciado, gracias