字体真棒图标无法正确对齐

Question

我在下面的这些div上有一个字体超酷的图标，并带有一个圆圈。但是它们的对齐方式不正确，因为宽度不一样，因此文本不是垂直对齐的。

可以解决这个问题，我记得可以用来修复它的某个类，但不记得该类的名称。

.circle-icon {
    background: #e3f4f6;
    padding: 10px;
    border-radius: 50%;
}

<div>
  <span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
  <span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
  <span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span>
</div>

Answer 1

使用堆叠图标：https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

.fa-circle {
  color: #e3f4f6;
}

<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>


<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
 </span>
  <span>10 Likes</span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>

还可以使用CSS版本：

.fa-circle {
  color: #e3f4f6;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
 </span>
  <span>10 Likes</span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>

Answer 2

您可以简单地使用宽度属性，并为每个cricle-icon赋予相同的宽度。