두 개의 거의 동일한 FontAwesome 아이콘을 <button>의 중심에 올바르게 배치하는 방법은 무엇입니까?

Question

두 개의 가운데있는 FontAwesome 아이콘 (icon-microphone 및 icon-microphone-off)이있는 토글 버튼을 만들려고합니다. 불행히도 버튼을 클릭하면 icon-microphone-off 아이콘이 아이콘 마이크에 비해 조금 왼쪽으로 이동합니다.

예 : 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; 
} 

자바 스크립트 : 내가하지 않습니다 해결 방법을 (발견했습니다

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

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

많이 좋아) : ju ST는 아이콘 마이크 오프 아이콘을 1 픽셀의 왼쪽 여백을 추가

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

중심으로 모두 아이콘을 정렬 할 수있는 더 나은 방법이 있나요?

Answer 1

아이콘의 크기를 홀수로 변경하십시오. 중심에 놓으려고하는 물체가 짝수 픽셀만큼 넓지 않기 때문에 1 픽셀 꺼짐입니다.

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