Font Awesome 菜单图标有 1px 偏移

我已经尝试解决这个问题几个小时了，并且我一直在寻找一个好的解决方案，但运气不佳。它让我发疯，摆弄填充和行高。垂直对齐它没有做任何事情（这是在另一个线程中建议的）。

基本上我正在尝试创建一个响应式导航菜单，当点击或单击图标时，将在菜单显示时下推页面。我使用的是移动优先策略，而不使用框架（该网站很简单，所以我觉得 Bootstrap 有点矫枉过正）。

但图标顶部似乎多了1px。

我使用的是 Chrome，我重现了这个问题供大家查看。

<i class="fa fa-bars"></i>

i {
    width: 48px;
    height: 48px;
    margin-top: 24px;
    box-sizing: border-box;
    border: 2px solid #555;
    border-radius: 50%;
}
.fa-bars {
    color: #555;
    font-size: 24px;
    text-align: center;
    line-height: 48px;
}

您可以查看结果：http://jsfiddle.net/thecornishninja/jK8rD/ http://jsfiddle.net/thecornishninja/jK8rD/

看到图标没有垂直居中吗？看起来它的顶部有一个额外的 1px 或 2px，无论我使用 rem 还是 px，它都在那里。

我使用的是 Fontastic 中的代码，但出于演示目的，我使用了 Bootstrap 中更简单的 CSS。两种方法都存在问题。

这可能是一件非常简单的事情，我很可能最终会自食其力，但我的大脑已经崩溃了，所以我希望你能帮忙。

您需要更改 .fa-bars:before 的 css，这是位置错误的元素。

Try:

.fa-bars:before {
    content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
    display:block;
    margin-top:-1px;
}

另外，线条的高度似乎很奇怪，因此无法正确定位。我将圆的大小更改为 49px，以便它居中。

Forked jsfiddle http://jsfiddle.net/p9JHH/.