Possible to size glyph relative to container?

Question

Icon fonts are an increasingly popular alternative to image sprites for embedding icons in webpages.

One capability of images that I can't find an equivalent for is sizing the icon relative to the container element.

With an image, I could do something like:

<div style="width: 200px">
  <img style="width: 100%"/>
</div>

but I haven't found any equivalent for glyph icons. Has anyone found a technique for sizing glyphs relative to the container?

Since the glyph are just a text, the same rules applies to them too. There are some new properties like viewport sizes, but they still need a bit of work, since they are still buggy. Of course you can write some JS code to make it fit your needs, but that kills the joy of using glyphs, if you are going to use js to change their sizes. — drip, Mar 28 '14 at 20:18
[Example](http://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size). Not highly appealing though. — fzzylogic, Mar 28 '14 at 20:27

score 1 · Accepted Answer · edited May 23 '17 at 12:05

This can't be done with CSS font-size, as the inherited size relating to glyphs is the parents font-size, and not it's box width.

It can be done with Javascript as mentioned here.

Matthew Riches put some code on JSFiddle to demonstrate this. I'm adding it here too so SO also has it:

<div id="container" style="width: 200px; background: #cccccc;">
    <span id="container">M</span>
</div>

and some js:

$(document).ready(function() {
    var fontSize = parseInt($("#container").height())+"px";
    $("#container span").css('font-size', fontSize);
});

1 Answers1