jquery - 使用 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 : 还必须将父 div 的宽度设置为 100% 以避免水平滚动条

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

JS : 跟你用的一样

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