Font Awesome菜单图标的偏移为1px [英] Font Awesome menu icon has 1px offset

问题描述

我已经尝试解决这个问题了几个小时，并且我一直在寻找一个很好的解决方案，但运气不佳.它使我疯狂，喜欢填充和行高.垂直对齐没有任何作用(在此处的另一个线程中建议这样做).

I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).

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

Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).

但是该图标顶部似乎还多了1像素.

But the icon seems to have an extra 1px on top.

我正在使用Chrome，并且已将问题重现给大家看看.

I'm using Chrome, and I've reproduced the issue for you guys to look at.

<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，都在那里.

See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.

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

I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.

这可能很简单，我可能会踢自己的屁股，但是我的脑袋被炸了，所以希望您能帮上忙.

It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.

推荐答案

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

You need to change the css for .fa-bars:before, that's the element that is mispositioned.

尝试:

.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，以使其居中.

Also, it seems the height of the lines altogether is odd, so it won't position correctly. I changed the size of the circle to 49px so that it'd be centered.

分叉 jsfiddle .

这篇关于Font Awesome菜单图标的偏移为1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！