Fontawesome icon doesn't do the same in Chrome and Firefox

Question

In Chrome / Safari, my icon in the boot button looks fine:

But in Firefox, the icon falls down:

I have a fontawesome icon located within a <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 to make Firefox version one line, like Chrome?

Jsbin

Answer 1

Move the icon to the left of the text. I'm not sure the main reason for this is not consistent with how you got it, but it makes both browsers invariably displayed.

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

Instead

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