Flexible CSS icon sizing using ems

[mattdietsche]

I came up with a solution to a problem that I thought I’d share.

The problem: I was creating a simple slideshow widget that could be rendered at a large range of sizes. For the navigation, I wanted to use CSS-only icons using pseudo-elements. My goal was to try get the icons to be sized in proportion to the widget size, without doing a bunch of server-side math and rendering the elements with a bunch of inline styles. (both things I don’t like doing)

The solution: What I ended up doing is a bit hackish, but was effective. First off, an important caveat was that I knew server-side the width that the widget was going to be rendered at. Then, after a bit of visual fiddling, I settled on a widget size/icon size ratio of 10:1. So the only work done server-side is to divide the widget size by 10 and add this value as an inline font-size CSS rule to the containing element of the widget.

Then all of my styles for the navigation icons could be done right in my stylesheet using ems, with “1em” being the base size for my icons. I positioned the icons within the widget using percentages, but the widths, heights, border-widths, etc.. were all done using ems and perfectly scale at any size the 10:1 ratio I was shooting for. One note is that you have to make sure your navigation elements are inheriting their font size from the wrapping element you added the font-size value to.

Why not just use percentages you ask? That was my first approach, but as far as I know, you can’t use a percentage for a border-width declaration, which is an important part of CSS-based icons. Maybe this is a technique that is already widely used or documented, but I hadn’t seen it before and thought this might help someone at some point.

[Author]

Posts