Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Max width of an icon font icon?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 21, 2013 at 11:52 am #42904
    cliffordp
    Member

    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 #125565
    Paulie_D
    Member

    >2000px icon font

    Edge-use much?

    February 21, 2013 at 12:02 pm #125567
    Mottie
    Member

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

    February 21, 2013 at 12:03 pm #125568
    cliffordp
    Member

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

    February 21, 2013 at 12:06 pm #125571
    Paulie_D
    Member

    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 #125681
    cliffordp
    Member

    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 #125683
    Paulie_D
    Member

    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 #125687
    Paulie_D
    Member

    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 #123210
    dgriesel
    Participant

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

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

    February 24, 2013 at 2:50 pm #125821
    cliffordp
    Member

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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.