fontawesome icon not rendering the same in Chrome and Firefox

Question

In Chrome/Safari my icon within a bootstrap button looks fine:

But in Firefox, the icon drops down a line:

I have the fontawesome icon floated right within the <button>.

<!--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;
}

How can I make the Firefox version one-line like the Chrome?

JSBIN

Answer 1

Move the icon to the left of the text. I'm not sure of the underlying cause of it not being consistent how you've got it - but this does make both browsers render it consistently.

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

Instead of

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