如何正確居中兩個幾乎相同的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 ST添加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; 
}