Improve scaling and vertical alignment of browse icons #5354
Conversation
Although we're using SVG icons because they are being added using pseudo elements it's currently impossible to directly set a size for them to scale to as https://stackoverflow.com/a/8993934 explains. So instead we use a solution based on the alternate approach there of setting the image as a background image, which can be scaled to our preferred size and then aligned.
Why do you need to scale the icons?
That's what I was going to stop doing after #5317. I was going to write the icons as |
|
Well it mostly started out as me trying to fix the alignment and the scaling became a kind of side effect as I realised that thing weren't very consistently sized. Possibly now that I know about the background image hack that might not be strictly necessary... |
|
This is redundant now #5385 is merged. |
Although we're using SVG icons because they are being added using pseudo elements it's currently impossible to directly set a size for them to scale to as https://stackoverflow.com/a/8993934 explains.
So instead we use a solution based on the alternate approach there of setting the image as a background image, which can be scaled to our preferred size and then aligned.
The only tricky part is working out the vertical size to scale to - just using
1emdoesn't really look right as it doesn't allow for the descenders so I've scaled it up a bit which seems to look about right in firefox and chrome.Here's a before and after example: