对于那些使用Bootstrap 4的人来说很简单:

<span class="align-middle"><i class="fas fa-camera"></i></span>

我将文本包装在一个，所以你可以分别针对它。现在，如果同时浮动和左浮动，则可以使用line-height来控制对象的垂直间距。将它设置为与(30px)相同的高度，将使它在中间对齐。在这里看到的。

新的标记:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

新CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

对我来说，只要让元素显示网格，并对齐内容就可以完美地工作。简单的解决方案。

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}

我必须自己做这件事，你需要反过来做。

不要玩弄文字的垂直对齐 玩垂直对齐的字体-真棒的图标

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

当然，您不能使用内联样式并将其与您自己的css类相匹配。但这是以复制粘贴的方式工作的。

在这里看到的: 按钮中的文本和图标垂直对齐

然而，如果由我来决定，我不会使用icon-2x。并简单地自己指定字体大小，如下所示

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

有关工作示例，请参阅JsFiddle

我99%的情况下在文本旁边使用图标，所以我做了全局更改:

.fa-2x {
  vertical-align: middle;
}

根据需要将3x, 4x等添加到相同的定义中。

这对我来说很有效。

i.fa {
  line-height: 100%;
}