css – fontawesome图标在Chrome和Firefox中无法呈现相同的效果

在Chrome / Safari中,我在引导按钮中的图标看起来很好：

但在Firefox中,图标下降了一行：

我在< button>内浮动了fontawesome图标.

<!--html-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
     <button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button>
  </div>

  <div class="btn-group" role="group">
   <button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
  </div>
</div>

<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon,i.fa {
color: rgb(90,90,90);
top: 1px;
}

如何使Firefox版本像Chrome一样？

JSBIN

解决方法

将图标移动到文本的左侧.我不确定它与你如何得到它的不一致的根本原因 – 但这确实使两个浏览器一致地呈现它.

<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>

代替

<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>