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?

Answer 1

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);
});