Fontawesome 5 extra top and bottom padding

Question

Is there any way to remove the extra top and bottom padding for Fontawesome 5 icon as shown in the image (after adding a red background color)

<i class="fab fa-5x fa-facebook" style="background-color: red;"></i>

Simple fiddle https://jsfiddle.net/68d05etb/15/

Answer 1

To eliminate extra padding in text/icons you can set a static line-height for the icon.

ie if you font-awesome icon is 30px tall but 5px of that is padding then you can do the following:

i{line-height: 25px;}

Answer 2

Not sure if this is right way to do it, but changing the line-height doesn't work for me. I end up creating the same effect I want by using fa-layers

<a href="#" class="fa-layers fa-fw" target="_blank"> <i class="fas fa-square" style="color: #FFFFFF;"></i> <i class="fab fa-facebook" style="color: #3C5995;"></i> </a>