fontawesome एक बूटस्ट्रैप बटन के भीतर अपना आइकन Chrome और Firefox

Question

में एक ही प्रस्तुत नहीं हो क्रोम/सफारी में आइकन ठीक लग रहा है:

:

लेकिन फ़ायरफ़ॉक्स में, आइकन एक पंक्ति नीचे चला जाता है

मेरे पास <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; 
} 

मैं फ़ायरफ़ॉक्स संस्करण को क्रोम की तरह एक-पंक्ति कैसे बना सकता हूं?

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>