调整图标大小以适应容器元素？

Question

该图标是http://fontello.com/

中字体的一部分

所以它基本上是文字。我在这里读了很多关于调整文本大小以适应容器元素的问题，但似乎没有任何解决方案。

但问题是图标略有不同 - 它总是一个字符。我想知道这可以以某种方式将其大小调整为容器元素的100％大小。因为我只需要找出一个字符的大小，而不是一个可变长度的字符串。

关于我怎么能这样做的任何想法？

Answer 1

我能想到的最接近纯CSS的是：

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

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

http://jsfiddle.net/t73yT/

您可以将font-size设置为容器的大小，并使用em指定容器宽度/高度。你的图标字体可能没有填充和普通字体的功能，这可能只是让它按预期工作（你可以尝试我猜）。

您还有一个javascript选项：

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

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

但是这几乎完全相同，并且你受到字体文件中任何间距/填充的限制。