字体真棒SVG和文本对齐

Question

我正在尝试根据图像将文本与Font Awesome SVG动画水平对齐

我无法理解的是按照此处的小提琴https://jsfiddle.net/4wvbrp6o/8/

放置文本

<div class="gears">
<i class="fas fa-cog fa-5x slow-spin" data-fa-transform="down-6  right-5"></i>
<i class="fas fa-cog fa-4x slow-spin" data-fa-transform="down-19 right-1"></i>
<i class="fas fa-cog fa-6x slow-spin" data-fa-transform="up-1 left-9"></i>
  <h1>
  TO BE ALIGNED IN LINE
  </h1>
</div>

.slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

h1{
  font-size: 36px;
}

当我将文字样式设置为h1时，对齐方式将完全消失。如何按图像对齐文本？