Resizing FontAwesome icons with FitText

Question

I am using FitText ( http://fittextjs.com/ ) to resize some titles in my page. I don't have any problem using it with h1, h2, etc but it does not work on the icons from FontAwesome. I know it's possible to resize fontawesome icons with this pluggin but I just don't get why it is not working for me.
Here is what I tried so far :

This works perfectly (regular text) :

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

This does not work (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

When you are using FitText at that time if the font-size is greater than 100px than you have to set the exact width as per your font-size.

Like in your case you have set 250px so use 250 percent width,

CSS :

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

HTML : Also you have to set 100% width to parent div to avoid horizontal scroll bar

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

JS : Its same like you have used.

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