如何在免费的jqgrid工具栏中同时使用glyphicons和字体真棒图标

Question

免费的jqgrid具有较大的FontAwesome标准和用户定义的按钮，其文本定义为

    $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        iconsOverText: true,
        caption: '<span class="ui-pg-button-text">Pay</span>',
        buttonicon: 'glyphicon glyphicon-cloud-download'
    });

我尝试使用

添加Glyphicon按钮

        buttonicon: 'glyphicon-cloud-download'

但按钮的对齐方式不同：

我也试过

import { mouseDownEvent } from '../common';

export default class MyComponent extends React.Component {
  componentDidMount() {
    this.refs.btn.addEventListener(
      'mousedown',
      mouseDownEvent.bind(this) // <-- not working!
    );
  }
  render() {
    return (
      <div ref="btn" className="btn"/>
    );
  }
}

在这种情况下，矩形出现而不是按钮。 如何同时使用这两种字体？

Answer 1

您的问题不包含足够的实施细节。如果只使用标准免费jqGrid中的代码，那么人们就不会看到任何glyphicon图标，因为fa类也被添加了。如果有人会删除fa课程，并且按钮（带有图标类的<span>）会有ui-pg-button-icon-over-text fa-lg fa-fw glyphicon glyphicon-cloud-download个来电话，那么我就不会看到字形位置的问题。请参阅the demo作为示例，结果如下所示

因此，您使用的其他CSS规则应该存在问题。我想您只需添加一个CSS规则来修复您的自定义CSS设置：

.ui-jqgrid .ui-pg-button span.glyphicon {
    margin-top: ???px; /* SET value/values instead of ???, -5px, for example */
}

将为margin-top指定新值。如果需要，该值可能为负数。您应该只选择与您使用的其他CSS设置相对应的margin值。您可以使用IE或Chrome的开发者工具来分析将在图标上应用哪些CSS规则，并使用您的自定义规则覆盖那些规则。