Font Awesome 5: Possible to change BACKGROUND-COLOR of icon so it doesn't bleed outside border?

I'd like to change the BACKGROUND-COLOR of a Font Awesome 5 icon. Unfortunately, when I specify the background-color it bleeds outside the icon's border.

Here is a sample:

<i class="far fa-exclamation-triangle" style="color: #000; font-size: 5em; background-color: yellow;"></i>

I am not surprised it acts like this, but is this possible to do?

Thank you for your help!

Solution

I posed this question to the very helpful Font Awesome support and was directed to use their built-in layering and power transforms to create custom icons.

Note: This solution only works if you're using the SVG + JS version of Font Awesome.

 <span class="fa-layers fa-fw fa-5x">
    <i class="fas fa-triangle" style="color: yellow;"></i>
    <i class="far fa-exclamation-triangle" style="color: black;"></i>
 </span