fontawesome Symbol nicht das gleiche in Chrome und Firefox

Question

In Chrome/Safari mein Symbol in einem Bootstrap-Taste Rendering sieht gut aus:

Aber in Firefox, das Symbol unten fällt eine Linie:

Ich habe die Fontawesome-Ikone innerhalb der <button> schwebte.

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

Wie kann ich die Firefox-Version einzeilig machen wie Chrome?

JSBIN

Answer 1

das Symbol links neben dem Text verschieben. Ich bin mir nicht sicher über die zugrunde liegende Ursache, dass es nicht konsistent ist, wie Sie es haben - aber das macht beide Browser es konsistent rendern.

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

Statt

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