However, if you use something like an icon font and set the font-size:2000px; (of the icon/span), it technically is 1 character, not a string of characters and so I'm curious how to say "I don't care if you WANT to be 2000px, you cannot be bigger than the container's width." (lol, I'm talking to icons... help me!)
Maybe this will help you consider the value of "responsive icon font icons":
3 icons that are nice and big for large browser windows but don't scale when the window is resized: http://screencast.com/t/bVF2qcroK (short video)
The solution would be the same whether the icon's font-size is 300px or 2000px (or %, em, etc).
As far as I know, it's not possible (via LESS/CSS) because if you go to any webpage and change the font-size to 2000px, all the letters in that paragraph will wrap, but they'll also be wider than their container (e.g. a 2000px letter "W" is not going to stay within the 900px page width).
http://jsfiddle.net/TourKick/DSy5y/1/ demonstrates that word-wrap:break-word; does the trick with a long string of text.
However, if you use something like an icon font and set the font-size:2000px; (of the icon/span), it technically is 1 character, not a string of characters and so I'm curious how to say "I don't care if you WANT to be 2000px, you cannot be bigger than the container's width." (lol, I'm talking to icons... help me!)
Example with a 2000px icon font with word-wrap:break-word; taking no effect is here: http://pagelinestheme.staging.wpengine.com/icon-font-shortcode#demo
Thank you.
Edge-use much?
Try fitText.js
Extreme example but looking to learn the principle still. Is it possible to control (purely with CSS)?
I can't see how....if you are using an icon-font...it needs to fit into a certain element which should be sized appropriately for it.
I am having trouble thinking of a reason NOT for this to be the case.
Maybe this will help you consider the value of "responsive icon font icons": 3 icons that are nice and big for large browser windows but don't scale when the window is resized: http://screencast.com/t/bVF2qcroK (short video)
The solution would be the same whether the icon's font-size is 300px or 2000px (or %, em, etc).
As far as I know, it's not possible (via LESS/CSS) because if you go to any webpage and change the font-size to 2000px, all the letters in that paragraph will wrap, but they'll also be wider than their container (e.g. a 2000px letter "W" is not going to stay within the 900px page width).
I haven't reviewed the video yet (on phone) but my initial thought is 'Shouldn't one choose an icon font that scales UP'?
I guess what I'm saying is' mobile first?'
An icon over say 24px seems unnecessary.
Looked at the video...without sound it doesn't mean much to me.
Frankly, aren't media queries the answer?
Just an idea, browser support will be crappy, but take a look at viewport relative units.
Something like
font-size: 100vmincould do the trickCool. Thanks for the heads up. Never heard of that before.