Search code examples
javascriptcssiconswebfonts

Resize icon to fit container element?

The icon is part of a font from http://fontello.com/

So it's basically text. I've read many questions here about resizing text to fit the container element and there aren't any solutions it seems.

But the thing is that the icon is slightly different - it's always a single character. I was wondering this makes it possible to somehow resize it to 100% size of the container element. Because I only need to find out the size of a character, and not a variable-length string.

Any ideas on how could I do that?

Solution

  • The closest i can think of getting with pure CSS is something like:

    .container {
    width:1em;
    height:1em;
    border:1px solid red;
    font-size: 100px;
}

.container span {
    font-size:1em;
    line-height:1em;
}

    http://jsfiddle.net/t73yT/

    where you set the font-size to the size of the container, and use em's to specify container width/height. Your icon font may not have the padding and what not that normal fonts do, which might just make it work as expected (you can but try i guess).

    You also have a javascript option of :

    $(document).ready(function(){
    var w = $('div').outerWidth();
    $('div').css('fontSize', w+'px');
});

    http://jsfiddle.net/YbUef/1/

    But this does pretty much the same thing, and you're limited by whatever spacing/padding is in the font-file.