Grow your CSS skills. Land your dream job.

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 21, 2013 at 11:54 am

    >2000px icon font

    Edge-use much?

    # February 21, 2013 at 12:02 pm

    Try [fitText.js](http://fittextjs.com/)

    # February 21, 2013 at 12:03 pm

    Extreme example but looking to learn the principle still.
    Is it possible to control (purely with CSS)?

    # February 21, 2013 at 12:06 pm

    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.

    # 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).

    # February 22, 2013 at 9:12 am

    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.

    # February 22, 2013 at 9:51 am

    Looked at the video…without sound it doesn’t mean much to me.

    Frankly, aren’t media queries the answer?

    # February 22, 2013 at 12:18 pm

    Just an idea, browser support will be crappy, but take a look at [viewport relative units](http://css-tricks.com/viewport-sized-typography/ “”).

    Something like
    font-size: 100vmin
    could do the trick

    # February 24, 2013 at 2:50 pm

    Cool. Thanks for the heads up. Never heard of that before.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".