Icon positioning

[lewiswharf]

I'm using Chrome Version 23.0.1271.95 m on Windows 7 and I'm experiencing alignment issues with the icons for the download & fork links. See image.

[nilshoerrmann]

Thanks for the report – I didn't know this happens in Chrome as well but I have seen this in Firefox before. I'm not sure yet what the problem is.

In case someone has an idea …

[nilshoerrmann]

PS: Opera on Mac has the same issue.

[nilshoerrmann]

The reason for this are the different font sizes of the icon and the label.
Still investigating how to best solve this.

[nilshoerrmann]

Okay, this is trickier than I thought: it seems like the different browser on the different operating systems handle vertical-align differently when two elements (a pseudo ::before and a a in this case) have different font sizes. Adjusting line heights results in opposite reactions on Mac and Windows (excluding Opera on Mac which behaves like on the Windows platform).

This needs to be fixed before the release of Factory but we will first concentrate on the other missing pieces.
I changed the title of this thread to make the issue clearer.

[nilshoerrmann]

Any objections to switch from an icon font to SVG background images?
We currently use 3 icons (fork, download, submodule/subfolder)

[allen]

No objections. In fact please do. That way, images will look just as sharp on retina displays without having to deal with multiple image resolutions.

[nilshoerrmann]

That way, images will look just as sharp on retina displays without having to deal with multiple image resolutions.

Side note: we currently have a script in place that checks the resolution of the device and swaps standard Gravatars with their higher resolution versions. We could do the same with images that are provided with Symphony's JIT image resizing.

[lewiswharf]

I'm still experiencing alignment issues with these icons. Is there a solution?

[nilshoerrmann]

Yes, we need to switch to SVG. Just needs to be done.

[brendo]

Do you have any experience in creating a custom font? SVG won't work in IE8 or Android <= 2.3 but custom fonts will (and lets us do animation/color etc.)

Ignore this if background images are going to be gracefully degraded.

[nilshoerrmann]

The thing is: it is a font currently.

[brendo]

/me backs away from the conversation (although I'd like to pick your brain about icon fonts later if I could!)