字体awesom图标对齐

Question

我尝试将三个fa图标排成一行,以便它们具有相同的高度.事情是,即使我手动设置它们的大小(通过font-size属性)它们看起来也不对齐(我需要它们大约是11px).我一直试图改变他们的位置很长一段时间.结果是什么:

.trash {
  position: relative;
  font-size: 11px;
}
.upload {
  position: relative;
  font-size: 11px;
}
.download {
  position: relative;
  top: 1px;
  font-size: 11px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
 <i class="fa fa-download download"></i>
<i class="fa fa-upload upload"></i>
<i class="fa fa-trash trash"></i>

显然,它们并不一致.是否有可能使它们更"均匀"？我知道已经提出了类似的问题,但他们并没有真正帮助我.

Answer 1

由于所有角色都没有相同的基线，因此您必须单独玩每个角色。我的示例中的红色边框显示了这一点。这是我能做的最好的事情，我将其设置font-size为 30px 以检查对齐情况。

.icons {
    font-size: 30px;
  }

.fa {
  border-top: 1px red solid;
  border-bottom: 1px red solid;
}

.download {
  position: relative;
  top: 0.07em;
}
.download:before {
   font-size: 1.06em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="icons">
  <i class="fa fa-download fa-4x download"></i>
  <i class="fa fa-upload fa-4x upload"></i>
  <i class="fa fa-trash fa-4x trash"></i>
</div>

使用相对字体大小（em单位）进行调整，无论font-size是多少，它都是一样的。