Hamburger icon's first bar slightly off


(heinrich5991) #1

In “Top navigation is not consistent” I saw that the hamburge menu is supposed to be three lines with the same distance to each other:

On my machine however, in both Firefox and Chromium, the first to bars are nearer to each other than the second and the third.

Firefox:
Chromium:


(Jeff Atwood) #2

Yeah, unfortunate font rendering issue – the hamburger is a Font Awesome glyph, specifically this one:

http://fortawesome.github.io/Font-Awesome/icon/bars/

So it will depend on the resolution of the display and the font rendering strategy.


(Zane Beckman) #3

I have this issue as well. It’s annoyed the crap out of me for quite some time, but clearly not enough to make a post about it.


(Sam Saffron) #4

Practically impossible to fix without switching icons or using a gif/png. Works perfectly on my retina mbp, off alignment on my Windows desktop.


(Zane Beckman) #5

With a little experimentation, I found that changing the font-size property from 20 to 21 in .d-header .icons [class^="fa fa-"] fixes this in chrome with no other discernable difference. I haven’t tested this in Firefox.


(heinrich5991) #6

Changing the font size from 20px to 21px fixes it for me as well (using Firefox).

EDIT: Works in Chromium too.


(Bill Ayakatubby) #7

Fixes in Firefox on Windows, too.


(Salman, Freelance Developer) #8

This should help …


(Jeff Atwood) #9

OK, good find, changing top right glyphs to 21px now vs 20px.

edit: although, for the record, it looks worse for me in Chrome at that size. It only starts to look “good” at 25px, at which point it is a wee bit too big. Try it yourself using f12, select the glyph, font-size, then use mousewheel to size it up and down and watch it change in real time …


(Jeff Atwood) #10