Max width of an icon font icon?
# February 21, 2013 at 11:52 am
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.# February 22, 2013 at 8:34 am
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).
You must be logged in to reply to this topic.