字体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以检查对齐。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用相对字体大小（em单位）进行调整，无论字体大小如何，它都是相同的。

Answer 2

最简单的方法是为它们提供固定宽度和中心文本对齐：

.fa {
  text-align: center;
  width: 16px;
}

当然，您需要使用宽度来使其按照您想要的方式显示所需的字体大小。

Modified JSFiddle demo

在：

后：

Answer 3

你可以试试这个：

ul li {
  list-style-type: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fff;
  text-align: center;
  border-radius: 100%;
  margin: 0 11px;
}
i {
  padding-top: 20%;
}

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

Answer 4

您是否尝试使用

vertical-align: middle;

在图标类上？