无法将fa-icon与img垂直对齐

Question

所以我一直在就如何使这些元素对齐而烦恼，我已经很接近了，但是统一徽标的svg形状不愿意让步...有人看到我所缺少的东西吗？

会有很多元素，其中大多数在没有图标时会显示图像，因此我将需要多次。

<div class="row">
    <fa-icon class="col icon" [icon]="['fab', 'angular']"></fa-icon>
    <fa-icon class="col icon" [icon]="['fab', 'github']"></fa-icon>
    <img class="col" src="./../../../assets/svg/unity-69-logo-svg-vector.svg">
</div>

img {
  display: block;
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  margin: auto;
  padding: 25px;
}

.icon {
  display: inline-block;
  font-size: 40px;
  line-height: 100px;
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: bottom;
}

Answer 1

Flexbox ...我把它放到所有东西上。

我猜/希望那是一个引导4行？将行转到弹性框，将对齐项设置为居中，然后从img和.icon中删除显示属性

<div class="row d-flex align-items-center">
    <fa-icon class="col icon" [icon]="['fab', 'angular']"></fa-icon>
    <fa-icon class="col icon" [icon]="['fab', 'github']"></fa-icon>
    <img class="col" src="./../../../assets/svg/unity-69-logo-svg-vector.svg">
</div>