3

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>

enter image description here

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

Thank you for your help!

2 Answers 2

2

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

More reading and examples here:

https://codepen.io/fontawesome/pen/wxLQEL

https://fontawesome.com/how-to-use/on-the-web/styling/layering

https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

1

FontAwesome is a font, so this is analogous to asking whether you can set the background color (fill) of the letter O in a regular font, which isn't possible. A font only has one color.

However, the FontAwesome font can be exported to individual SVG graphics (here). If you use those rather than the font, you may be able to set the fill style of the SVG to obtain the desired result. If the SVG path has no fill, you can always edit the SVG so that it does.

2
  • Ok thanks for the explanation. I will give this a try.
    – Jibran
    Aug 15, 2018 at 18:43
  • Because of the IE limitations with using the technique you mentioned I simply used the SVG graphic and created my own icon. Thanks.
    – Jibran
    Aug 15, 2018 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.