Html 字体菜单图标的偏移量为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;
}

我{
宽度：48px；
高度：48px；
利润上限：24px；
框大小：边框框；
边框：2px实心#555；
边界半径：50%；
}
.fa酒吧{
颜色：#555；
字体大小：24px；
文本对齐：居中；
线高：48px；
}

您可以查看结果：

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

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

---

这可能是一件非常简单的事情，我很可能会踢自己的屁股，但是我的大脑被炸了，所以我希望你能帮我。

你需要更改.fa条的css：之前，这是位置错误的元素

尝试：

而且，这些线的高度似乎都很奇怪，所以它的位置不正确。我把圆圈的大小改为49px，这样它就可以居中了

---

分叉。

HTML和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;
}