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的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。

Font Awesome菜单图标的偏移量为1px

1 个答案: