如何仅在x轴上缩放Font Awesome 5图标，而不会变形

Question

我有以下grid布局。

<div class="container">
  <i class="far fa-circle left"></i>  <!--left col-->
  <i class="fas fa-long-arrow-alt-right arrow"></i>  <!--mid col-->
  <i class="fas fa-circle right"></i>  <!--right col-->
</div>

在所有3列中，我都显示图标。我想在中间仅在x轴上放大图标，而不会变形。我尝试从this answer中申请transform: scale(x,y)，如下所示。

.container {
  width: 10em;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
}

.arrow {
  justify-self: center;
  font-size: 250%;
  transform: scale(2, 1); /*<-- scaling*/
}

.left {
  font-size: 250%;
  justify-self: end;
}

.right {
  font-size: 250%;
  justify-self: start;
}

但是，它会使图标变形，如下所示。

Link to codepen。

是否有基于CSS的解决方案？另外，也可以使用一种解决方案来拉伸图标，使其填充中间列的x轴。实际上，这甚至更好：）