如何在免费的jqgrid中使用bootstrap标准图标

Question

如何在jqgrid中使用Twitter Bootstrap（Glyphicon Halflings set）中包含的图标？

jqgrid允许使用FontAwesome图标，但这需要包含其他文件。 由于引导程序已包含图标（http://getbootstrap.com/components/），因此附加文件会导致重复，并且不是必须的。

如何在jqgrid中使用默认引导程序图标？

更新

我正在寻找替换所有FontAwesome图标的方法，以便不再需要添加FontAwesome和jquery ui图片图片。

演示

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

显示需要更换的基本图标。

来自顶部的新图标：

• 添加 - glyphicon-plus
• 编辑 - glyphicon-pencil

等

通常FontAwecome和Glyphicons具有相同的名称。对应表在

中

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

另一种可能性是使用CSS来创建图标。在这种情况下，根本不需要特殊的图标字体。

Answer 1

我在the wiki article中描述了如何创建custom iconSet

我准备了the demo，它演示了使用混合图标创建自定义iconSet：来自Font Awesome的部分和来自Twitter Bootstrap（Glyphicon Halflings set）的部分。它显示如下图所示的结果

其中Add，Edit和其他一些图标（但不是View图标）来自Glyphicon：

我使用以下代码将fa类的使用从顶部common属性移动到子位置。因为我需要在导航栏中使用混合图标。我在每个单独的图标定义中定义了空nav.common并移动了fa类。代码中最重要的部分是以下

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

我建议您将图标集glyphIcon的定义与默认情况下免费jqGrid中包含的图标集jQueryUI和fontAwesome的定义进行比较（请参阅the lines）。