字体Awesome菜单图标存在1像素的偏移。

Question

字体Awesome菜单图标存在1像素的偏移。

3

我已经花费几个小时尝试解决这个问题，但没有找到好的解决方案。我一直在调整填充和行高，但仍无法垂直对齐它（在另一个帖子中建议这样做）。基本上，我正在尝试创建一个响应式导航菜单，当点击图标时，菜单会展开并向下推动页面。我采用了移动优先策略，而不使用框架（因为网站很简单，我觉得Bootstrap过于复杂）。但是，图标似乎多了1像素的空白。我正在使用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。这个问题在两种方法中都存在。

可能是某些非常简单的东西，我可能会自己解决，但我的大脑已经疲惫不堪，所以希望您能帮忙。

- cornishninja

HTML和CSS是否在同一页上？ - undefined

不，我的项目中它们是分开的。仅仅为了演示目的，它们只在一个页面上。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chiri Vulpes · Accepted Answer

您需要更改 .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派生出来。