Font Awesome menu icon has 1px offset

Question

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).

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).

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

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

You can view the result: http://jsfiddle.net/thecornishninja/jK8rD/

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.

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.

Answer 1

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

Try:

.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;
}

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.

Forked jsfiddle.