Как использовать глификоны и значки Font Awesome одновременно на бесплатной панели инструментов jqgrid

Бесплатный 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'

В этом случае вместо кнопки появляется прямоугольник. Как использовать оба шрифта одновременно?


css font-awesome jqgrid glyphicons free-jqgrid
person Andrus    schedule 29.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем вопросе недостаточно деталей реализации. Если вы просто используете код в стандартном бесплатном jqGrid, то вы не увидите никакого значка glyphicon, потому что также добавлен класс fa. Если удалить класс fa, а кнопка (<span> с классами значков) будет иметь вызовы ui-pg-button-icon-over-text fa-lg fa-fw glyphicon glyphicon-cloud-download, то я не вижу проблемы с положением глификона. См. демонстрацию в качестве примера, результат выглядит следующим образом:

введите здесь описание изображения

Так что это должно быть проблемой с другими правилами 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 будут применяться к значку, и перезаписать их своими собственными правилами.

person Oleg    schedule 30.08.2015