Как отцентрировать иконку посередине кнопки?

Question

[dmitriu256]

Вопрос простой, но как правильно отцентрировать иконку внутри кнопки. Кнопка-переключатель слайдов у slick-slider

<button class="slider-button slider-button__prev feedback-slider__button">
     <i class="fas fa-chevron-left"></i>
   </button>

SASS

.slider-button
  position: absolute
  display: block
  margin: 0 auto
  padding: 0

  width: 63px
  height: 63px

  top: 50%
  transform: translateY(-50%)

  font-size: 20px
  color: $text-color-dark
  border-radius: 100%
  border: 1px solid red
  box-shadow: -5px 5px 11px rgba(83, 83, 83, 0.16)
  background: #ffffff
  transition: all 0.5s ease
  z-index: 2
  cursor: pointer
  &:hover
    background: $active-color
  &__prev
    left: -30px

Результат


Все равно как будто не по середине.

Второй вариант flex!important

position: absolute
  display: flex!important
  align-items: center
  justify-content: center
  padding: 0
  width: 63px
  height: 63px

  top: 50%
  transform: translateY(-50%)

  font-size: 20px
  color: $text-color-dark
  border-radius: 100%
  border: 1px solid red
  box-shadow: -5px 5px 11px rgba(83, 83, 83, 0.16)
  background: #ffffff
  transition: all 0.5s ease
  z-index: 2
  cursor: pointer

Или оба варианта верны, пора отдохнуть?

Comments

[Ankhena]

Стрелочка не вполне равновесная фигура.
Поэтому, если вы поставите картинку физически по центру, выглядеть будет плохо.
Просто сдвиньте ее так, чтобы выглядело хорошо.

!important

Плохо в любом случае.

Answer 1

[Александр]

Размер стрелки идет через font-size: 20px.
Вполне возможно, что откуда-то наследуется высота строки. Поставьте у стрелки высоту строки единицу:
line-height: 1