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/
To eliminate extra padding in text/icons you can set a static
line-height
for the icon.i.e. if you font-awesome icon is
30px
tall but5px
of that is padding then you can do the following:i{line-height: 25px;}