fontawesome 图标在 Chrome 和 Firefox 中呈现不一样

Question

在 Chrome/Safari 中，bootstrap 按钮中的图标看起来不错：

但在 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 版本 one-line 与 Chrome 一样？

JSBIN

Answer 1

将图标移到文本的左侧。我不确定它与您的获取方式不一致的根本原因 - 但这确实使两个浏览器一致地呈现它。

<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>

fontawesome 图标在 Chrome 和 Firefox 中呈现不一样

fontawesome icon not rendering the same in Chrome and Firefox

css

compatibility

cross-browser

twitter-bootstrap

font-awesome