Html 如何增加jqgrid中图标的大小？

我应该如何增加jqgrid中图标的大小（添加、删除…）？我已经在ui.jqgrid.css中编写了以下代码

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div  span.ui-icon,
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div  span.ui-icon{float:left;margin: 2px; width:18px;}
.ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none 
!important; margin: 0 !important; padding: 0 !important; position: relative;white-space: nowrap;overflow: hidden;}

---

您的查询缺少一些有效的信息，但您可以始终在适当的选择器上使用CSS缩放

另一个可能的解决方案是增加字体大小-请参阅类

.ui-jqgrid .ui-jqgrid-view

并增加所需的字体大小

---

由于您使用的是Guriddo jqGrid 5.2.1，因此您可以在免费的jqGrid中获得快速而专业的响应。jqGrid支持基于矢量的字体图标，以替代jQuery UI的光栅图标。要使用Font Awesome，您只需包含Font Awesome的CSS，并添加

iconSet:“fontAwesome”

选项。例如，使用以下简单代码

$（“#grid1”）.jqGrid({
colModel:[…]，
iconSet：“真棒”，
...
});

哪个显示

例如，如果您想将导航器图标的大小增加到标准大小的1.5，您可以添加CSS规则

.navtable.ui pg按钮{
字体大小：150%；
}

并获取导航按钮

看。您可以看到导航器按钮是自动包装的。请参阅wiki文章

如果您想增加寻呼机所有按钮的大小，那么可以使用CSS规则

.ui pg table.ui pg按钮{
字体大小：150%；
}

替代品。请参见，其中显示

免费jqGrid还支持

iconOvertext:true

选项，该选项允许获得以下图标外观：

看

通常，您可以根据需要以简单的方式自定义按钮。例如，您可以转到一些按钮生成器页面，如创建自定义按钮，并将CSS样式复制到

.ui jqgrid.navtable.ui pg button

。我这样做并创建了下一个演示，其中显示以下导航栏：

在下面，您可以找到上次演示中使用的CSS规则：

.ui jqgrid.navtable.ui pg按钮：非（.ui状态悬停）{
背景：#3498db；
背景图像：-webkit线性渐变（顶部，#3498db，#2980b9）；
背景图像：-moz线性梯度（顶部，#3498db，#2980b9）；
背景图像：-ms线性梯度（顶部，#3498db，#2980b9）；
背景图像：-o-线性梯度（顶部，#3498db，#2980b9）；
背景图像：线性梯度（至底部，#3498db，#2980b9）；
-webkit边界半径：8；
-莫兹边界半径：8；
边界半径：8px；
-网络工具包盒阴影：3px 3px 7px#666666；
-moz盒阴影：3px 3px 7px#666666；
盒影：3px 3px 7px#666666；
颜色：#ffffff；
字体大小：14px；
填充：6px 6px 6px 6px；
边框：实心#0089de 1px；
文字装饰：无；
}
.ui-jqgrid.navtable.ui-pg-button.ui-state-hover，
.ui jqgrid.navtable.ui pg按钮：悬停{
背景#3cb0fd；
背景图像：-webkit线性渐变（顶部，#3cb0fd，#3498db）；
背景图像：-莫兹线性梯度（顶部，#3cb0fd，#3498db）；
背景图像：-ms线性梯度（顶部，#3cb0fd，#3498db）；
背景图像：-o-线性梯度（顶部，#3cb0fd，#3498db）；
背景图像：线性梯度（至底部，#3cb0fd，#3498db）；
填充：6px 6px 6px 6px；
字体大小：14px；
文字装饰：无；
}

在上一个演示中，我使用了额外的

pagerRightWidth:100

选项来修复寻呼机的右侧部分，并为导航器图标提供更多的位置

更新：一个人可以通过使用

toppager:true

而不是

pager:true

来使用top pager，或者同时使用两个寻呼机。如果将上述CSS规则中的

.navtable

替换为

.ui pg table

，则该样式将应用于寻呼机的所有按钮：

---

请始终包括您使用（可以使用）的jqGrid版本，以及jqGrid的分支（、商业版或旧版jqGrid）。最后，重要的是要编写要增加的图标：导航器图标（添加/编辑）、

格式化程序：“操作”

、寻呼机图标（第一、上一、下一、最后一页），排序图标等。例如，jqGrid在每个对话框中都使用关闭图标。您是否也要增加图标，或者您的问题仅限于导航器图标。我想增加所有图标的字体，如编辑、添加、删除、刷新等。我正在使用jqGrid 5.2.1此版本的jqGrid抱歉，但我不支持商业，w我开发了另一种fork，它可以在MIT或GPLv2许可下完全免费使用（与旧版本的jqGrid相同，我们可以使用FontAwesome图标来增加大小吗？我已经尝试过了。ui jqGrid.ui jqGrid视图{position:relative；left:0；top:0；padding:0；font size:20px；z-index:100；}但是它仍然没有增加字体大小我已经这样做了，但是当我选择一行时，另一行会高亮显示，即使图标没有按照我写的顺序显示。$（“#list1”）.jqGrid（“navGrid”，“#prowed1”，{cloneToTop:true，格式化程序：“checkboxFontAwesome4”，addicon:“fa-fa plus”，add:true，delicon:“fa-fa垃圾”，del:true，searchicon:“fa-fa搜索”，search:true，refreshicon:“fa-fa刷新”，refresh:true，editicon:“fa-fa编辑”，编辑：true，保存图标：'fa-floppy-o'，保存：true，}，@Aishwarya:抱歉，但我不明白你的意思。你能更清楚地描述这个问题吗？如何重现这个问题？我发布的一些演示中是否存在这个问题，或者你可以修改演示中的一个，使其出现问题？你能一步一步地描述应该做些什么来重现这个问题，包括预期的结果吗d您所拥有的。顺便说一下，您所包含的

navGrid

调用包含许多不需要的参数或错误的选项（如

formatter

）。我认为该调用可以缩减为

$（“#list1”）.jqGrid（“navGrid”）