如何在免费的 jqgrid 工具栏中同时使用 glyphicons 和 font awesome 图标

Question

免费的 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'

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

Answer 1

您的问题没有包含足够的实施细节。如果只是使用标准免费 jqGrid 中的代码，那么将看不到任何 glyphicon 图标，因为也添加了 fa class。如果有人删除 fa class 并且按钮（带有图标 classes 的 <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 规则，并用您的自定义规则覆盖那里。

如何在免费的 jqgrid 工具栏中同时使用 glyphicons 和 font awesome 图标

How to use glyphicons and font awesome icons simultaneously in free jqgrid toolbar

css

jqgrid

font-awesome

glyphicons

free-jqgrid