如何使 jqgrid 顶部工具栏自定义按钮像标准按钮一样大

Question

基于问题jqGrid - How can I make the paging buttons bigger?的样式用于使jqgrid顶级工具栏按钮更大：

.ui-jqgrid .ui-jqgrid-toppager {  height:35px !important; }
.ui-jqgrid .ui-pg-button  { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin: 0 10px !important;
}

/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox
{
    margin: 0px;
    padding: 0px;
    float: left;
    height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input
{
    padding: 1px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox > label
{
    margin: 0px;
    border-width: 0px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label
{
    margin: 0px;
    border-width: 1px;
}

/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text
{
    margin: 0px;
    padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
    width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary
{
    margin: -8px 0px 0px -8px;
}

jqgrid 工具栏还包含基于 Oleg 答案的自定义可检查按钮，定义如下：

 var autoedit = false;
 $("#grid_toppager_left table.navtable tbody tr").append(
        '<td class="ui-pg-button ui-corner-all">' +
            '<div class="ui-pg-div my-nav-checkbox">' +
            '<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
            '<label title="Press to toggle"' +
            ' for="AutoEdit">Press to toggle</label></div></td>'
    );
    $("#AutoEdit").button({
        text: false,
        icons: {primary: "ui-icon-star"}
    }).click(function () {                      
      autoedit = !autoedit;

    });

工具栏中的这个自定义按钮（星形图标）出现在错误的位置：太右并与下一个按钮一起：

宽度也小于标准按钮，顶部对齐太大：

如何制作像标准按钮一样的自定义按钮？

Answer 1

如果您需要使用更大的标准工具栏图标，我建议您在导航工具栏中使用Font Awesome icons，而不是标准的 jQuery UI 图标。我在the answer中描述过。

例如，如果我在旧演示中仅设置以下 CSS

.ui-jqgrid .ui-jqgrid-toppager { height:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

我可以在顶部工具栏中使用 20px 的图标。 The demo 将显示以下结果

因为来自Font Awesome 的所有图标都被实现为矢量字体，因此对于任何字体大小（图标大小）都可以获得完美的结果。需要将所有其他自定义解决方案（如可检查按钮）发布到 Font Awesome，但经过一些投资后，您可以获得非常好的最终结果。