biểu tượng fontawesome không render cùng trong Chrome và Firefox

Question

Trong Chrome/Safari biểu tượng của tôi trong vòng một nút bootstrap có vẻ tốt đẹp:

Nhưng trong Firefox, biểu tượng rơi xuống một dòng:

Tôi có biểu tượng phông chữ nổi ngay bên trong <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; 
} 

Làm cách nào để tạo phiên bản Firefox giống như Chrome?

JSBIN

Answer 1

Di chuyển biểu tượng sang bên trái văn bản. Tôi không chắc chắn nguyên nhân cơ bản của nó không nhất quán như thế nào bạn đã có nó - nhưng điều này làm cho cả hai trình duyệt làm cho nó một cách nhất quán.

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

Thay vì

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