字体真棒图标对齐

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>

显然，它们没有对齐。有没有可能让他们更多"even"？我知道已经有人问过类似的问题，但它们并没有真正帮助我。

Answer 1

最简单的方法是给它们全部固定宽度和居中的文本对齐方式：

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

当然，您需要调整宽度，使其看起来像您想要的字体大小。

Modified JSFiddle demo.

之前：

之后：

Answer 2

你可以试试这个：

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 3

由于所有角色都没有相同的基线，因此您必须单独玩每个角色。我示例中的红色边框显示了它。这是我能做的最好的，我将 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是多少都是一样的

Answer 4

您尝试使用

vertical-align: middle;

在 class 图标上？

字体真棒图标对齐

Font awesom icons alignment

html

css

font-awesome