Font Awesome Icons Not Aligning Correctly

I have these div below taht have a font swesome icon with a circle around them. But they aren't aligned correclty as the width aren't the same, so the text isn't vertically aligned

Solution 1:

Use stacking icons: 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>

Works also with the CSS version:

.fa-circle {
  color: #e3f4f6;
}

<link  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>