Fontawesome 5 дополнительных верхних и нижних прокладок

Question

Есть ли способ удалить дополнительную верхнюю и нижнюю подкладку для значка Fontawesome 5, как показано на рисунке (после добавления красного цвета фона)

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

Простая скрипка https://jsfiddle.net/68d05etb/15/

Answer 1

Не уверен, что это правильный способ, но изменение line-height не работает для меня.В итоге я создаю тот же эффект, который хочу, используя 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>

Answer 2

Чтобы исключить дополнительные отступы в тексте / значках, вы можете установить статический line-height для значка.

, т.е. если у вас значок шрифта-удивительный 30px в высоту, но 5px этого заполнения, тоВы можете сделать следующее:

i{line-height: 25px;}