html - Styling <button> with <i> icon and text in Chrome/Firefox -

i have <button> tag have <i> element displaying icon before text.

here's html

<button>     <i></i>     login using facebook </button> 

the inside <i> displaying icon. other tag <a>, can use :before pseudo-class display icon, seems can not <button> tags.

and here's css

button {     background: #4a6ea9;     color: #fff;     font-weight: bold;     line-height: 24px;     border: 1px solid #4a6ea9;     vertical-align: top; } button {     background: url('http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png');     display: inline-block;     height: 24px;     width: 24px;     border-right: 1px dotted #fff; } 

here's fiddle

http://jsfiddle.net/petrabarus/sdh3m

the first initial display in chrome 28.0.1500.95 linux below

looks little bit imbalance on top , bottom (i'm not designer nor front-end engineer can sense it's quite imbalance), can add padding padding: 4px 6px 1px 6px; , looks more balanced below in chrome (does different in yours?)

although, don't know why tag seems add padding icon , text. set icon's size 24x24px , text's line-height 24px final height of button 32px. possible remove padding?

and biggest problem in firefox (my version 17.0.1 linux), text seems displayed near bottom , looks imbalance

the padding addition fix chrome's makes worse firefox's.

is possible make same in both browsers (and pretty other modern browsers opera , safari)?

try below css.

button {     background: url("http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png") repeat scroll 0 0 rgba(0, 0, 0, 0);     border-right: 1px dotted #ffffff;     display: inline-block;     float: left; /*new edit*/     height: 24px;     width: 24px; }