如何在免费jqgrid中使用引导标准图标 [英] How to use bootstrap standard icons in free jqgrid

问题描述

如何在jqgrid中使用Twitter引导程序(设置Glyphicon Halflings)附带的图标?

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

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

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.

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

How to use default bootstrap icons in jqgrid ?

更新

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

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

演示

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

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

Shows basic icons which needs to be replaced.

顶部的新图标:

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

等

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

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

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

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

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

推荐答案

我在我准备了演示演示了使用混合图标创建自定义iconSet的过程:Font Awesome的一部分和Twitter Bootstrap的一部分( Glyphicon Halflings set ).结果显示如下图

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

添加"，编辑"和其他一些图标(但不是视图"图标)来自Glyphicon:

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

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

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

我建议您将图标集glyphIcon的定义与默认jjGrid中包含的图标集jQueryUI和fontAwesome的定义进行比较(请参阅

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).

这篇关于如何在免费jqgrid中使用引导标准图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！