Icono – Pure CSS icons with only one element

Re:Icono – Pure CSS icons with only one element by jekrb on Monday January 12, 2015 @09:14AM (#8873917)

> it seems impossible to use multiple sizes in a single document

How so? It's possible in most cases to stick an extra class on the icon, say `.2x` and add a rule to your css such as —

    [class*="2x"] {
       transform: scale(2)
    }

[ Parent | on HN ]

Re:Icono – Pure CSS icons with only one element by lziz on Monday January 12, 2015 @12:54PM (#8875288)

Perfectly viable technique, though if they are written in SASS/LESS/whatever, the author could refactor the icons to mixins with a parameter that sets the scale, so the values themselves are "true".

[ Parent | on HN ]

Re:Icono – Pure CSS icons with only one element by madeofpalk on Monday January 12, 2015 @05:29PM (#8876853)

The author could refactor them to use ems or percents instead of pixels, that way they would automatically change size depending on their parent.

[ Parent | on HN ]

Re:Icono – Pure CSS icons with only one element by madeofpalk on Monday January 12, 2015 @05:30PM (#8876861)

Downside of using this is transform still leaves the box size that's in the flow of the document the same size. Problematic if you have the icons inline, or in elements like buttons.

[ Parent | on HN ]