Как сделать бесплатный шрифт jqrid более привлекательным

Question

Используется бесплатный jqgrid 4.8 с набором иконок шрифтов.

Стандартные кнопки действий определяются с помощью colmodel

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

дополнительные кнопки добавляются с помощью кода из

как добавить кнопку перед действием кнопок в jqgrid

но они отображаются в виде кнопок пользовательского интерфейса jquery, даже если в этом коде используются классы шрифтов.

Высота строки jqgrid увеличивается с помощью кода из JQgrid, устанавливающего высоту строки

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

но кнопки действия встроенного форматера слишком малы для планшетов.

Размеры кнопок панели инструментов увеличены с помощью

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

Как сделать пользовательские кнопки верхней панели инструментов jqgrid больше, чем стандартные кнопки, но это не влияет на кнопки встроенного действия.

Я пытался использовать

.ui-icon {
    zoom: 1.5;
}

но это меняет только кнопки действий jquery ui.

Как увеличить размеры встроенных кнопок действий, если используется шрифт awesome? Как использовать шрифт удивительные значки кнопок для пользовательских кнопок действий JQuery UI?

Answer 1

Вы можете решить проблему разными способами. Например, вы можете добавить правило CSS следующим образом

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

или же

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

Демо демонстрирует результаты. Он использовал дополнительно другой width значение по умолчанию

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