How to make free jqrid font awesome action buttons

Question

Free jqgrid 4.8 with font awesome icon set is used.

Standard action buttons are defined using colmodel

[{"name":"_actions","search":false,"width":(37+15)+45
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":true,"keys":true
,"delbutton":true}]

additional buttons are added using code from

how add button before action buttons in jqgrid

but they appear as jquery ui buttons even if font awesome classes are used in this code.

jqgrid row height is increased using code from JQgrid set row height

.ui-jqgrid tr.jqgrow td {
    height: 2.8em !important;
}

but inline formatter action buttons are too small for tablets.

Toolbar button sizes are increased using

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    font-size: 20px;
}

from How to make jqgrid top toolbar custom buttons bigger like standard buttons but this does not affect to inline action buttons.

I tried to use

.ui-icon {
    zoom: 1.5;
}

but this changes only jquery ui action buttons.

How to increase sizes of inline action buttons if font awesome is used ? How to use font awesome icons buttons for custom jquery ui action buttons ?

Answer 1

You can solve the problem in many ways. For example you can add CSS rule like the following

.jqgrow .ui-jqgrid-actions > .ui-pg-div > span { font-size: 24px; }

or

.jqgrow .ui-pg-div > span.fa { font-size: 24px; }

The demo demonstrates the results. It used additionally another width value as default

{ name: "act", template: "actions", width: 72 }