How to use bootstrap standard icons in free jqgrid

问题

How to use icons included with Twitter Bootstrap (Glyphicon Halflings set) in jqgrid?

jqgrid allows to use FontAwesome icons but this requires including additional file. Since bootstrap has already icons included (http://getbootstrap.com/components/) additional file causes duplication and is not nessecary.

How to use default bootstrap icons in jqgrid ?

Update

i'm looking for a way to replace all FontAwesome icons so that adding FontAwesome and jquery ui picture image are not more required.

Demo

http://www.ok-soft-gmbh.com/jqGrid/OK/navButtons2-fa4.htm

Shows basic icons which needs to be replaced.

New icons from top:

• Add - glyphicon-plus
• Edit - glyphicon-pencil

etc.

Usually FontAwecome and Glyphicons have same name. Correspondence table is in

http://tagliala.github.io/vectoriconsroundup/

The other possibility is to use CSS to create icons. In this case special icon font in not needed at all.

回答1:

I described in the wiki article how to create custom iconSet

I prepared the demo which demonstrates creating of custom iconSet with mix icons: the part from Font Awesome and the part from Twitter Bootstrap (Glyphicon Halflings set). It displays the results like on the picture below

where Add, Edit and some other icons (but not View icon) are from Glyphicon:

I used the following code where I moved the usage of fa class from top common property to the child place. Because I needed to use mixed icons in navigator bar. I defined empty nav.common and moved fa class in every individual icon definition. To the most important part of the code is the following

$.extend(true, $.jgrid.icons, {
    glyphIcon: {
        //common: "",
        pager: {
            common: "fa fa-fw",
            first: "fa-step-backward",
            prev: "fa-backward",
            next: "fa-forward",
            last: "fa-step-forward"
        },
        ...
        nav: {
            common: "",
            edit: "glyphicon glyphicon-pencil",
            add: "glyphicon glyphicon-plus",
            del: "glyphicon glyphicon-trash",
            search: "glyphicon glyphicon-search",
            refresh: "glyphicon glyphicon-refresh",
            view: "fa fa-lg fa-fw fa-file-o",
            save: "glyphicon glyphicon-save",
            cancel: "glyphicon glyphicon-ban-circle",
            newbutton: "fa fa-lg fa-fw fa-external-link"
        },
        ...
    }
});

$grid.jqGrid({
    ...
    iconSet: "glyphIcon",
    ...
});

I recommend you to compare the definition of icon set glyphIcon with the definition of icon sets jQueryUI and fontAwesome included in free jqGrid by default (see the lines).

来源：https://stackoverflow.com/questions/29248640/how-to-use-bootstrap-standard-icons-in-free-jqgrid