jqGrid Pager Area - Using Font Awesome Icons

Question

I would like to use Font Awesome icons:

in the jqGrid pager area instead of the physical images by

Answer 1

It's very interesting question! I never used Font Awesome icons before, but it seems very interesting project.

jqGrid has currently no direct support of Font Awesome icons, but I prepared the simple demo which shows how to replace the standard jQuery UI navigator icons with the corresponding icons from Font Awesome.

One can see mostly clear the difference to the original navigator icons after zoom of the page. I included below the navigator displayed with zoom 400%:

The original navigator using jQuery UI icons

The navigator with Font Awesome icons:

The code which I used is very simple. Instead of usage

$grid.jqGrid("navGrid", "#pager", {view: true});

I used

$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");

I added the CSS

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }

I think it's possible to replace more jQuery UI icons to Font Awesome icons, but it's not very simple. I will think about the problem more and will contact the developer of jqGrid (Tony Tomov) to consider to make jqGrid more friendly to Font Awesome icons, so that it could be possible very simple switch to Font Awesome icons.

UPDATED: I added the code which allows top replace more icons from the pager:

var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
    .removeClass("ui-icon ui-icon-seek-first")
    .addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
    .removeClass("ui-icon ui-icon-seek-prev")
    .addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
    .removeClass("ui-icon ui-icon-seek-next")
    .addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
    .removeClass("ui-icon ui-icon-seek-end")
    .addClass("icon-step-forward");

As the result one get the following pager:

instead of

UPDATED 2: The code for changing minimizing icon looks a little completer. One should first change the icon initially

$grid.closest(".ui-jqgrid")
    .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
    .removeClass("ui-icon ui-icon-circle-triangle-n")
    .addClass("icon-circle-arrow-down");

and then change it after every click on the icon:

onHeaderClick: function (gridstate) {
    if (gridstate === "visible") {
        $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
            .removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
            .addClass("icon-circle-arrow-down");
    } else if (gridstate === "hidden") {
        $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
            .removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
            .addClass("icon-circle-arrow-up");
    }
}

Additionally one need to add the CSS

.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }

To fix the sorting icons I used the code

var $sortables = $grid.closest(".ui-jqgrid")
    .find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
    .removeClass("ui-icon ui-icon-triangle-1-s")
    .addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
    .removeClass("ui-icon ui-icon-triangle-1-n")
    .addClass("icon-sort-up");

and the CSS

.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
    height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }

As the result one will get the following:

UPDATED 3: In the next demo one can find more full replacement of jQuery UI icons to Font Awesome icons.

UPDATED 4: The answer provides solution for Font Awesome version 4.x.