Как исправить смещение значков в кнопках в зависимости от размера кнопки - PullRequest
Новая
       54

Как исправить смещение значков в кнопках в зависимости от размера кнопки

0 голосов
/ 10 июня 2019

Я не использую определенный фреймворк, а создал свой собственный значок шрифта. Тем не менее, когда я пишу значок внутри кнопки, это нормально, но если я изменяю высоту кнопки, значок имеет тенденцию смещаться, получая пространство над ним, которое толкает его слишком низко. У кого-нибудь есть идеи, как сделать так, чтобы это работало стабильно?

Пробовал высоту строки и использовал flex, но flex перемещает всю кнопку. И высота строки не меняет ничего. 

<button class="button icon"><i class="icon-plus" /></button>

.button {
...
 &::after {
      content: '\e00E';
      font-family: $font-family-icons;
      color: $white;
      font-size: 1.2rem;
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      top: calc(50% - 0.6rem);
      left: calc(50% - 0.6rem);
      @include animation-zoom-in();
    }
}

i {
  position: relative;
  font-family: YouCruitIconFont, sans-serif !important;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  font-size: inherit;
  -webkit-font-smoothing: antialiased;

  & + span {
    vertical-align: middle;
    margin-left: 0.5rem;
  }
}

1 Ответ

0 голосов
/ 10 июня 2019

Вы пробовали 

.button {
...
 &::after {
      content: '\e00E';
      position:absolute;
      font-family: $font-family-icons;
      color: $white;
      font-size: 1.2rem;
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%, -50%);
      @include animation-zoom-in();
     }
}
...