CODEWITHSUNDEEP
cssfont-awesomefont-awesome-5
Iain H.
Iain H.

Reputation: 84

Fontawesome 5 extra top and bottom padding

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)

enter image description here

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

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

Upvotes: 0

Views: 1017

Answers (2)

Iain H.
Iain H.

Reputation: 84

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>

Upvotes: 0

Lewis Browne
Lewis Browne

Reputation: 932

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 but 5px of that is padding then you can do the following:

i{line-height: 25px;}

Upvotes: 2

Related Questions