fontawesome icona non rendere lo stesso in Chrome e Firefox

Question

In Chrome/Safari mia icona all'interno di un pulsante di bootstrap guarda bene:

Ma in Firefox, l'icona scende una linea:

Ho l'icona fontawesome flottata proprio all'interno dello <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; 
} 

Come posso rendere la versione di Firefox a una riga come Chrome?

JSBIN

Answer 1

spostare l'icona alla sinistra del testo. Non sono sicuro della causa alla base del fatto che non è coerente come l'hai ottenuto, ma questo fa sì che entrambi i browser lo rendano coerentemente.

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

Invece di

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