The font awesome 4 code generates these SVGs which are not target-able with typical CSS, which sucks, and breaks my entire codebase.
In the past, you could make an <i> tag, and style it like everything else, but now that these SVGs get generated in the DOM, you can't use text-align or margin, etc.
I've tried wrapping the icons in divs, but this is still limited and cannot affect the icon itself when it comes to alignment within the div.
So this:
<div class="tradeoff-cell">
<span class="tradeoff-title">Lower Cap</span>
<div class="tradeoff-icon">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
</div>
Becomes this:
<div class="tradeoff-cell">
<span class="tradeoff-title">Lower RL Rate</span>
<div class="tradeoff-icon"><svg class="svg-inline--fa fa-chart-line fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="chart-line" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zM456 96H344c-21.4 0-32.1 25.9-17 41l32.9 32.9-72 72.9-55.6-55.6c-4.7-4.7-12.2-4.7-16.9 0L96.4 305c-4.7 4.6-4.8 12.2-.2 16.9l28.5 29.4c4.7 4.8 12.4 4.9 17.1.1l82.1-82.1 55.5 55.5c4.7 4.7 12.3 4.7 17 0l109.2-109.2L439 249c15.1 15.1 41 4.4 41-17V120c0-13.3-10.7-24-24-24z"></path></svg><!-- <i class="fa fa-line-chart" aria-hidden="true"></i> -->
</div>
</div>
