Последовательное абсолютное положение иконок Font Awesome с пробелами? - PullRequest
Новая
       9

Последовательное абсолютное положение иконок Font Awesome с пробелами?

0 голосов
/ 31 октября 2018

Я пытаюсь использовать абсолютную позицию для размещения значков Font Awesome в верхнем правом углу внутри div. У меня проблема в том, что некоторые значки имеют верхний и нижний пробелы (например, fa-envelope), а некоторые значки нет (например, fa-phone).

Целью является постоянное расстояние от границы сверху и справа от значка.

HTML: 

<div class="item">
  <div class="corner">
    <i class="fa fa-envelope fa-5x"></i>
  </div>
  Hello world
</div>
<div class="item">
  <div class="corner">
    <i class="fa fa-phone fa-5x"></i>
  </div>
  Hello world
</div>

CSS: 

.item {
  padding:1em;
  margin:0 auto;
  width:50%;
  font-size:14px;
  position:relative;
  border:2px solid red;
  margin-bottom:1em;
  height:10em;
}
.corner {
  position:absolute;
  top:0em;right:0em;
}

Я положил это в кодовую ручку, чтобы проиллюстрировать, что я пытаюсь сделать. https://codepen.io/timmerbu/pen/yRdBwx

...