Question

我正在尝试使用绝对位置将真棒字体图标放置在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

Answer 1

如果您在此处处理大量图标，这将是一个痛苦的过程。但是，您可以通过某种方式访问要删除空格的图标的类名，并在CSS中向它们添加margin-top: -8px;来做到这一点。

示例

.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;
  margin: 0;
  padding: 0;
}

.fa-envelope{
  margin-top: -8px
}

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/>
<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>

带有空格的Font Awesome图标的绝对位置一致吗？

1 个答案: