0

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

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 来创建图标。在这种情况下，根本不需要特殊的图标字体。

4

1 回答 1

4

我在wiki 文章中描述了如何创建custom iconSet

我准备了演示使用混合图标创建自定义 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的定义与图标集的定义进行比较，jQueryUI并fontAwesome默认包含在免费的 jqGrid 中（参见行）。

于 2015-03-26T17:58:56.807 回答