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 like to accomplish. I've read Oleg's answer that demonstrates removing the icon class and adding the Font Awesome icons in its place. But when I try to do that nothing changes. I believe I'm possibly referencing the icons wrong.

I downloaded Font Awesome 4.0.3 and I have jqGrid 4.5.4--In the _icons.scss file of the FA file tree the icons are referenced like this:

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

But in Oleg's suggested code the new icons are labeled "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");

This is my code: I only did the edit icon for this example. I also used the new label for the icons, "fa-pencil".

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

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

What combination of code do I need in order to replace the ui-icons with the Font Awesome icons?

Any helpful tips would be appreciated, thanks

Answer 1

I agree that my old answer can't be used with Font Awesome 4 because the names of the classes are changed in version 4. I use Font Awesome 4 myself in solutions which I develop for my customers and I decide to share it with other.

The files jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js contains new jqGrid method initFontAwesome and formatter: "checkboxFontAwesome4". The demo demonstrates the usage of the files:

The usage of suggested method initFontAwesome is very simple. First of all one need to include additional CSS and JavaScript files:

<link rel="stylesheet" type="text/css"
      href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
...
<link rel="stylesheet" type="text/css" href=".../ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href=".../jQuery.jqGrid.fontAwesome4.css" />
...
<script type="text/javascript" src=".../i18n/grid.locale-en.js"></script>
<script type="text/javascript" src=".../jquery.jqGrid.min.js"></script>
<script type="text/javascript" src=".../jQuery.jqGrid.fontAwesome4.js"></script>

Then one modify well known line

$("#grid").jqGrid({
    ... // jqGrid options and callbacks
});

to

$("#grid").jqGrid("initFontAwesome").jqGrid({
    ... // jqGrid options and callbacks
});

To use formatter: "checkboxFontAwesome4" instead of predefined formatter formatter: "checkbox" one need just includes jQuery.jqGrid.checkboxFontAwesome4.js after jquery.jqGrid.min.js (or jquery.jqGrid.src.js):

<script type="text/javascript"
        src=".../jQuery.jqGrid.checkboxFontAwesome4.js"></script>

The formatter "checkboxFontAwesome4" have some advantage to formatter: "checkbox":

• one can select the row by clicking on the icons. The standard formatter: "checkbox" uses disabled <input type="checkbox">. Clicking on disabled control will be blocked on the most web browsers. I posted before "clickableCheckbox" (see here and here).
• The tests which I made with grids having many rows and columns using the tree checkbox formatters shows that formatter "checkboxFontAwesome4" is the most quick in rendering (in all web browsers where I it tested), formatter: "checkbox" is lower and "clickableCheckbox" is the mostly slow. So formatter "checkboxFontAwesome4" is not only cool, but it's really quick in rendering.

At the end I includes the current state of jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js:

jQuery.jqGrid.fontAwesome4.css:

.ui-jqgrid .ui-pg-table .ui-pg-div>span.fa, #jqContextMenu .ui-menu-item>a>span.fa {
    text-indent:0;
    height: auto;
    width: auto;
    background-image: none;
    overflow: visible;
    padding-top: 1px;
}
.ui-jqgrid .ui-pg-table .ui-pg-div {
    text-indent:0;
    height: auto;
    width: auto;
    background-image: none;
    overflow: visible;
    padding-top: 1px;
}

.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title span { font-size: 18px; display: inline-block; }
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title { margin-top: 0; top: 0; padding-left: 2px; padding-bottom: 2px;}
.ui-jqgrid .ui-icon-asc.fa { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc.fa, .ui-jqgrid .ui-icon-desc.fa {
    height: auto; margin-top: 2px; margin-left: 2px;
}
.ui-jqgrid .s-ico>.ui-state-disabled.fa, .s-ico>.ui-state-disabled.fa { padding: 0; }

.ui-jqdialog .ui-jqdialog-titlebar-close { text-decoration: none; right: 0.2em !important}
.ui-jqdialog .ui-jqdialog-titlebar-close>span { margin-top: 3px; margin-left: 5px;}
.ui-jqdialog .EditTable .fm-button-icon-right { padding-left: 0; padding-right: 0.5em; float:right;}
.ui-jqdialog .EditTable .fm-button-icon-left { padding-left: 0; float:left; }
.ui-jqdialog .EditButton>.fm-button { display: block; width: auto; }
.ui-jqdialog .EditButton>.fm-button>span { float: left; margin-left: 0.5em; margin-right: 0;}
.ui-jqgrid .ui-jqdialog .fm-button>span { margin-left: 0.5em; margin-right: 0; }
.ui-jqdialog>.ui-resizable-se { bottom: -3px; right: -3px}

jQuery.jqGrid.fontAwesome4.js:

/*global $ */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.jgrid, {
        icons: {
            common: "fa", // will be implemented later
            scale: "", // will be implemented later. For example as "fa-lg"
            titleVisibleGrid: "fa fa-arrow-circle-up",
            titleHiddenGrid: "fa fa-arrow-circle-down",
            titleIcon: "ui-corner-all fa-title",
            close: "fa fa-times",
            edit: "fa fa-pencil fa-fw",
            add: "fa fa-plus fa-fw",
            del: "fa fa-trash-o fa-fw",
            search: "fa fa-search fa-fw",
            refresh: "fa fa-refresh fa-fw",
            view: "fa fa-file-o fa-fw",
            pager: {
                first: "fa fa-step-backward fa-fw",
                prev: "fa fa-backward fa-fw",
                next: "fa fa-forward fa-fw",
                last: "fa fa-step-forward fa-fw"
            },
            form: {
                prev: "fa fa-caret-left",
                next: "fa fa-caret-right",
                save: "fa fa-floppy-o",
                undo: "fa fa-undo",
                close: "fa fa-times",
                delete: "fa fa-trash-o"
            },
            searchForm: {
                reset: "fa fa-undo",
                query: "fa fa-comments-o",
                search: "fa fa-search"
            }
        }
    });

    $.extend($.jgrid.nav, {
        editicon: $.jgrid.icons.edit,
        addicon: $.jgrid.icons.add,
        delicon: $.jgrid.icons.del,
        searchicon: $.jgrid.icons.search,
        refreshicon: $.jgrid.icons.refresh,
        viewicon: $.jgrid.icons.view
    });

    $.extend($.jgrid.defaults, {
        fontAwesomeIcons: true // the new option will be used in callbacks
    });

    $.extend($.jgrid, {
        originalCreateModal: $.jgrid.originalCreateModal || $.jgrid.createModal,
        createModal: function (aIDs, content, p, insertSelector, posSelector, appendsel, css) {
            $.jgrid.originalCreateModal.call(this, aIDs, content, p, insertSelector, posSelector, appendsel, css);
            if ($(insertSelector).find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable").jqGrid("getGridParam", "fontAwesomeIcons")) {
                $("#" + $.jgrid.jqID(aIDs.modalhead) + ">a.ui-jqdialog-titlebar-close>span.ui-icon")
                    .removeClass("ui-icon ui-icon-closethick")
                    .addClass($.jgrid.icons.close);
                $("#" + $.jgrid.jqID(aIDs.themodal) + ">div.jqResize").removeClass("ui-icon-grip-diagonal-se");
            }
        }
    });

    $.extend($.jgrid.view, {
        beforeShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-triangle-1-w")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-w")
                        .addClass($.jgrid.icons.form.prev);
                } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-e")
                        .addClass($.jgrid.icons.form.next);
                } else if ($this.hasClass("ui-icon-close")) {
                    $fmButton.removeClass("fm-button-icon-left")
                        .addClass("fm-button-icon-right")
                        .html("<span class=\"" + $.jgrid.icons.form.close + "\"></span><span>" + $fmButton.text() + "</span>");
                }

            });
        }
    });

    $.extend($.jgrid.del, {
        afterShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $tdButtons = $dialog.find(".EditTable .DelButton"),
                $fmButtonNew = $("<td class=\"DelButton EditButton\" style=\"float: right;\">"),
                $iconSpans = $tdButtons.find(">a.fm-button>span.ui-icon");

            $tdButtons.css("float", "right");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-scissors")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.delete + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                } else if ($this.hasClass("ui-icon-cancel")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                }
            });
            if ($fmButtonNew.children().length > 0) {
                // remove &nbsp; between buttons
                $tdButtons.replaceWith($fmButtonNew);
            }
        }
    });

    $.jgrid.extend({
        initFontAwesome: function () {
            return this.each(function () {
                var $grid = $(this);
                $grid.bind("jqGridFilterAfterShow", function (e, $form) {
                    // an alternative to afterShowSearch
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        $this.removeClass("ui-icon");
                        if ($this.hasClass("ui-icon-search")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.search + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-arrowreturnthick-1-w")) {
                            $this.closest(".EditButton").css("float", "left");
                            $fmButton.addClass("fm-button-icon-left")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.reset + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-comment")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.query + "\"></span><span>" + $fmButton.text() + "</span>");
                        }
                    });
                }).bind("jqGridAddEditBeforeShowForm", function (e, $form) {
                    // alternative to beforeShowForm callback
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        if ($this.hasClass("ui-icon-triangle-1-w")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-w")
                                .addClass($.jgrid.icons.form.prev);
                        } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-e")
                                .addClass($.jgrid.icons.form.next);
                        } else if ($this.hasClass("ui-icon-disk")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.html("<span class=\"" + $.jgrid.icons.form.save + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-close")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.removeClass("fm-button-icon-left")
                                .addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                        }

                    });
                }).bind("jqGridHeaderClick", function (e, gridstate) {
                    var $icon;
                    if (this.p.fontAwesomeIcons) {
                        $icon = $(this).closest(".ui-jqgrid").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span");
                        if (gridstate === "visible") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-down")
                                .addClass($.jgrid.icons.titleVisibleGrid).parent().addClass($.jgrid.icons.titleIcon);
                        } else if (gridstate === "hidden") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-up")
                                .addClass($.jgrid.icons.titleHiddenGrid).parent().addClass($.jgrid.icons.titleIcon);
                        }
                    }
                }).bind("jqGridInitGrid", function () {
                    var $this = $(this), $pager, $sortables;

                    if (this.p.fontAwesomeIcons) {
                        $pager = $this.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($.jgrid.icons.pager.first);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
                            .removeClass("ui-icon ui-icon-seek-prev")
                            .addClass($.jgrid.icons.pager.prev);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-next")
                            .removeClass("ui-icon ui-icon-seek-next")
                            .addClass($.jgrid.icons.pager.next);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-end")
                            .removeClass("ui-icon ui-icon-seek-end")
                            .addClass($.jgrid.icons.pager.last);

                        $this.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("fa fa-arrow-circle-up").parent().addClass("ui-corner-all fa-title");

                        $sortables = $this.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("fa fa-sort-asc fa-lg");
                        $sortables.find(">span.ui-icon-triangle-1-n")
                            .removeClass("ui-icon ui-icon-triangle-1-n")
                            .addClass("fa fa-sort-desc fa-lg");
                    }
                });
            });
        }
    });
}(jQuery));

jQuery.jqGrid.checkboxFontAwesome4.js:

/*global jQuery */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        checkboxFontAwesome4: function (cellValue, options) {
            var title = options.colModel.title !== false ? ' title="' + (options.colName || options.colModel.label || options.colModel.name) + '"' : '';
            return (cellValue === 1 || String(cellValue) === "1" || cellValue === true || String(cellValue).toLowerCase() === "true") ?
                '<i class="fa fa-check-square-o fa-lg"' + title + '></i>' :
                '<i class="fa fa-square-o fa-lg"' + title + '></i>';
        }
    });
    $.extend($.fn.fmatter.checkboxFontAwesome4, {
        unformat: function (cellValue, options, elem) {
            var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes", "No"];
            return $(">i", elem).hasClass("fa-check-square-o") ? cbv[0] : cbv[1];
        }
    });
}(jQuery));

UPDATED: Another demo contains some additional CSS styles which improve visibility of jqGrid if one includes bootstrap.css of the Bootstrap 3.0.2. I am sure that the styles are not the best, but there fix the problems which I found in my tests. Below are the styles:

.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
    height: auto;
    width: auto;
    line-height: inherit;
}
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
    padding: 1px;
}
.ui-jqgrid { line-height: normal; }
div.ui-jqgrid-view table.ui-jqgrid-btable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title {
    border-collapse: separate;
    margin-top: 0;
    top: 0;
    margin-right: 2px;
    height: 22px;
    width: 20px;
    padding: 2px;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover span {
    margin-top: -1px;
    margin-left: -1px;
}
.ui-paging-info { display: inline; }
.ui-jqgrid .ui-pg-table { border-collapse: separate; }
div.ui-jqgrid-view table.ui-jqgrid-btable td {
    border-left-style: none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
    border-left-style: none
}
.ui-jqgrid .ui-jqgrid-htable th div {
    height: 14px;
}
.ui-jqgrid .ui-jqgrid-resize {
    height: 18px !important;
}

UPDATED 2: One more demo works with Font Awesome 4.2 and Bootstrap 3.2. The usage is very easy. One should include some .css (jQuery.jqGrid.fontAwesome4.css and jQuery.jqGrid.bootstrap-fixes.css) and .js files (jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js) and to use .jqGrid("initFontAwesome") before the grid are created. To fix problems with height of editing form at the second opening I used beforeInitData: function () { $("#editmod" + this.id).remove(); } additionally. One can download the latest versions of jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.bootstrap-fixes.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js from here.