Как правильно центрировать два почти одинаковых значка FontAwesome до центра <button>?

Question

Я пытаюсь создать кнопку переключения с двумя центрированными значками FontAwesome: значок-микрофон и значок-микрофон. К сожалению, при нажатии кнопки значок значка-микрофона смещается влево относительно значка-микрофона.

Пример: http://jsfiddle.net/bchkM/3/

HTML:

<div id="btn1" class="btn"><i class="icon-microphone"></i></div> 

CSS:

btn { 
    width: 48px; 
    min-height: 48px; 
    border-radius: 50%; 
    background: #854eb3; 
    text-align: center; 
    line-height: 48px; 
    font-size: 30px; 
    color: white; 
} 

JavaScript:

$(function() { 
    $("#btn1").click(changeIcon); 
} 

function changeIcon() { 
    $(this).children().toggleClass("icon-microphone icon-microphone-off"); 
} 

Я нашел обходной путь (который я не как много): ju го добавить 1px левое поле для иконок микрофонов-офф:

.margin-1px-fix { margin-left: 1px; }

Есть ли лучший способ выровнять как значок в центр?

Answer 1

Измените размер значка на нечетное число. Это 1px, потому что объект, который вы пытаетесь сосредоточить, вероятно, не является четным числом пикселей в ширину.

.btn { 
    width: 49px; 
    min-height: 49px; 
    border-radius: 50%; 
    background: #854eb3; 
    text-align: center; 
    line-height: 49px; 
    font-size: 30px; 
    color: white; 
}