I recently started using FitText () to dynamically resize certain titles on my webpage. While I've had success with resizing h1, h2, and other text elements, I've run into an issue when trying to apply it to fontawesome icons. I know that FitText is designed to work with fontawesome icons as well, but for some reason, I can't seem to get it to work for me.
Here's what I've attempted so far:
Successful implementation with 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' })
Failed attempt with FontAwesome icon:
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' })