如何在免费 jqgrid 中使用引导标准图标

Question

如何在 jqgrid 中使用 Twitter Bootstrap (Glyphicon Halflings set) 附带的图标？

jqgrid 允许使用 FontAwesome 图标，但这需要包含附加文件。 由于 bootstrap 已包含图标 (http://getbootstrap.com/components/)，因此其他文件会导致重复，因此不是必需的。

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

更新

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

演示

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

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

顶部的新图标：

• 添加 - glyphicon-plus
• 编辑 - 字形铅笔

等等

通常 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）。