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

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

在考虑了所有建议的选项后，最干净的解决方案似乎是设置行高和垂直对齐:

参见Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

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

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

这对我来说很有效。

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

最简单的方法是设置垂直对齐css属性为middle

i.fa {
    vertical-align: middle;
}

当使用flexbox时，字体和文字旁边的图标垂直对齐是非常困难的。我尝试了页边距和填充，但这移动了所有项目。我尝试了不同的弯曲对齐，如中心，开始，基线等，没有任何效果。调整图标的最简单和最干净的方法是将其包含的div设置为position: relative;上图:XX;这件事做得很完美。