Consider switching to em unit

[adamschwartz]

Awesome work!

After looking at the way you handled icon sizes (which I thought was really clever, btw), I couldn’t help but wonder if you might benefit from employing the same strategy but with fractional ems instead of px. For example, you could set the base font size to say 16px and then set @1 = .0625em,@2 = .125em, etc.

The potential benefit of this is you could then have a .icono-2x class, for example, which would simply apply font-size: 32px and all of the icons would get twice as big. You would only have to add a single line of extra CSS to get sizes in 2x, 4x, etc. and the complexity of the .less code wouldn’t have to change at all, afaict.

I’ll note that I have made some icons like this before and have run into odd browser rounding issues. So this might be a concern. But I think it might be fine if you set a base font size for all icons in px and then use em for the width, height, border-width, ::after and ::before sizes, etc.

I’d be happy to take a stab at a PR if you think this is something icono could benefit from.

[joaocunha]

+1.

A single class approach also works for that:

.top-menu [class^="icono-"] {
    font-size: 16px;
}

.sidebar [class^="icono-"] {
    font-size: 24px;
}

Not to mention media queries.

[adamschwartz]

@joaocunha Good points. Only thing I’d just caveat is that doing non-integer multiples of the base font size (whatever that ends up as in this em world), could produce non-pixel-fitted icons or other undesirable results due to rounding. So once a base font size is set at say 16px or 32px, you’ll want to only user integer multiples of that size.

This made me just think of a potentially interesting approach in which the base font size is set to 1px, and so you have em units like 1em, 2em, etc. essentially behaving as pixels. Then 2px, 3x, base font size would be your multiples. This may have strange consequences for icons inline with commonly sized text, though. I may take a crack at it anyway just for fun.

[joaocunha]

@adamschwartz I don't think non-integer would cause any side effects as long as we're using ems. As a matter of fact, even non-integer pixels may round very nicely, as you can see on vUnit.

The easiest way to convert is to use font-size:10px as a base, and convert the units to em.

FROM:

.icono-check {
    width: 28px;
    height: 28px;
    margin: 3px 0 3px 6px;
    transform: rotate(-45deg);
}

TO:

/* base value for all icons, comes as standard and can be overriden by cascade */
[class^="icono-"] {
    font-size: 10px;
}

.icono-check {
    width: 2.8em;
    height: 2.8em;
    margin: .3em 0 .3em .6em;
    transform: rotate(-45deg);
}

This would convert the units and everything would look exactly the same.

The base font-size would ship with the lib, and would be overriden as required, like on the previously mentioned .sidebar [class^="icono-"] {font-size: 24px} example.

[adamschwartz]

I might not have been clear but I was originally commenting on the 16px and 24px sizes used in your original example. The analogous thing in your latest example would be to have then:

.sidebar [class^="icono-"] {
    font-size: 15px;
}

What I’m saying is 15 * .3 and 15 * .6, etc. will produce either 4 and 9, 5 and 9 (both not maintaing the original 1-to-2 ratio of 3 and 6) or it will show the .3em unit as 4 solid pixels and a 5th half-filled in pixel (not pixel-fitted).

[joaocunha]

Maybe I was not clear also :)

This is a quick hack I came up with to show a proof-of-concept:

(focus only on the check icon)

And this is with font-size:51px:

My point is, uneven ratios/non-integer values would work just fine with em units. It adjusts automatically just by tweaking the base font-size.

Are we on the same page? :)

[adamschwartz]

It’s not easy to tell, but in your example, the .3em and .6em margins will not center the icon properly.

Here’s a quick example which exhibits the issue more clearly:

<style>
  .icon {
    font-size: 10px
  }

  .icon.icon-large {
    font-size: 15px
  }

  .icon.icon-test {
    height: 1em;
    width: 0;
    border-left: .3em solid red;
    border-right: .6em solid blue
  }
</style>
<div class="icon icon-test"></div>
<br>
<div class="icon icon-large icon-test"></div>

On jsFiddle

In the small icon, the blue right border is twice the width of the left red border. In the large icon, the blue icon is 9/4ths larger, since in a border width, the browser rounds 4.5px to 4px.

Depending on where the units are used, you’ll either get ratios off (like this example) or you’ll lose pixel-fitting (assuming the originally-sized set was already pixel-fitted).

[joaocunha]

Ok, now I see what you mean. Can't think of any other solution other than abiding to safe base font-sizes. That would most likely require some tweaking on the icons as well.

[joaocunha]

Adding to it, this issue is happening already when zooming in/out with cmd + +/-.

[benwiley4000]

I'm very interested in this becoming a thing - it should be easy to use the icons at any scale desired, and em allows that.

[hemedani]

The rem is better.

See this link for good understanding of unit

And read this great article for understanding pixels