That's really smart - However, it seems impossible to use multiple sizes in a single document, which make it impractical over other alternatives such as Ionicons, Icomoon or FontAwesome.
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".
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.
Comments
That's really smart - However, it seems impossible to use multiple sizes in a single document, which make it impractical over other alternatives such as Ionicons, Icomoon or FontAwesome.
Still a nice showcase, congrats!
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 —
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".
The author could refactor them to use ems or percents instead of pixels, that way they would automatically change size depending on their parent.
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.