html - 如何正确地将两个几乎相同的 FontAwesome 图标居中到中心?

Question

我正在尝试使用两个居中的 FontAwesome 图标创建切换按钮：图标麦克风和图标麦克风关闭。不幸的是，当单击按钮时，icon-microphone-off 图标相对于 icon-microphone 向左移动了一点。

示例：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

将图标的大小更改为奇数。它偏离了 1 像素，因为您尝试居中的对象可能不是偶数像素宽。

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