使用FitText调整FontAwesome图标的大小

Question

我正在使用FitText（http://fittextjs.com/）调整页面中某些标题的大小。使用h1，h2等时我没有遇到任何问题，但它对FontAwesome的图标无效。我知道可以用这个插件调整fontawesome图标的大小，但我不知道为什么它不适合我。
这是我到目前为止所尝试的：

这完美无缺（常规文字）：

HTML：

<span id="title1">Text to resize</span>

CSS：

#title1{
    font-size: 72px;
    position: relative;
    text-align: center;
    margin: 0 auto;
}

JS：

jQuery("#logo").fitText(1, { minFontSize: '20px', maxFontSize: '72px' })

这不起作用（FontAwesome）：

HTML：

<span id="awesome-bolt" class="fa fa-bolt"></span>

CSS：

#awesome-bolt{
display: block;
width: 100%;
font-size: 250px;

}

JS：

jQuery("#awesome-bolt").fitText(1, { minFontSize: '100px', maxFontSize: '250px' })

Answer 1

当您使用FitText时，如果字体大小超过100px，则必须根据字体大小设置确切的宽度。

就像你的情况一样，你设置了250px所以使用250％的宽度，

CSS：

#awesome-bolt {
    display: block;
    width: 250%;
    font-size: 250px;
}
.icn {
    width:100%; 
    overflow:hidden ; 
}

HTML：您还必须将100％宽度设置为父div以避免水平滚动条

<div class="icn">
    <span id="awesome-bolt" class="fa fa-bolt"></span>
</div>

JS：和你用过的一样。

jQuery("#awesome-bolt").fitText(1, { minFontSize: '100px', maxFontSize: '250px' })