Font Awesome 菜单图标有 1px 偏移

Question

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

基本上，我正在尝试创建一个响应式导航菜单，当点击或单击图标时，当菜单显示时将向下推页面。我在不使用框架的情况下使用移动优先策略（网站很简单，所以我觉得 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/

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

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

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

Answer 1

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

试试：

.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，以便居中。

分叉jsfiddle。