如何将两个几乎相同的FontAwesome图标正确地居中到<button>的中心？</button>

Question

我正在尝试使用两个居中的FontAwesome图标创建切换按钮：icon-microphone和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;
}

JavaScript的：

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

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

我找到了一个解决方法（我不太喜欢）：只需为icon-microphone-off图标添加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;
}