如何在免费的 jqgrid 工具栏中同时使用字形图标和字体真棒图标答案

【问题标题】：How to use glyphicons and font awesome icons simultaneously in free jqgrid toolbar如何在免费的 jqgrid 工具栏中同时使用字形图标和字体真棒图标
【发布时间】：2026-01-23 21:10:02
【问题描述】：

免费的 jqgrid 有很大的 FontAwesome 标准和用户定义的按钮，文本定义如下

    $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        iconsOverText: true,
        caption: '<span class="ui-pg-button-text">Pay</span>',
        buttonicon: 'fa-flag',
    });

我尝试使用添加 Glyphicon 按钮

    $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        iconsOverText: true,
        caption: '<span class="ui-pg-button-text">Pay</span>',
        buttonicon: 'glyphicon glyphicon-cloud-download'
    });

但按钮的对齐方式不同：

我也试过

        buttonicon: 'glyphicon-cloud-download'

在这种情况下，出现矩形而不是按钮。如何同时使用两种字体？

【问题讨论】：

标签： css jqgrid font-awesome glyphicons free-jqgrid

【解决方案1】：

您的问题没有包含足够的实施细节。如果只使用标准免费 jqGrid 中的代码，那么将看不到任何 glyphicon 图标，因为也添加了 fa 类。如果有人会删除fa 类并且按钮（带有图标类的<span>）将有ui-pg-button-icon-over-text fa-lg fa-fw glyphicon glyphicon-cloud-download 调用，那么我看不到字形图标位置和问题。以the demo 为例，结果如下所示

所以这应该是您使用的其他 CSS 规则的问题。我想您只需要再添加一条 CSS 规则来修复您的自定义 CSS 设置：

.ui-jqgrid .ui-pg-button span.glyphicon {
    margin-top: ???px; /* SET value/values instead of ???, -5px, for example */
}

这将为margin-top 指定新值。如果需要，该值可以是负数。您应该只选择与您使用的其他 CSS 设置相对应的边距值。您可以使用 IE 或 Chrome 的开发者工具来分析哪些 CSS 规则将应用于图标并用您的自定义规则覆盖那里。

【讨论】：