.fa-rating{
  --rating: 0;                 /* fallback */
  --stars: "\f005\f005\f005\f005\f005"; /* star glyph x5 */
  --color: #8a97a6;            /* the gray you want */
  position: relative;
  display: inline-block;
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.45rem;      /* tweak spacing to taste */
  color: var(--color);
  overflow: hidden;
}

/* bottom: 5 outlined stars */
.fa-rating::before{
  content: var(--stars);
  font-family: "Font Awesome 7 Free"; /* FA6/7 family name */
  font-weight: 400;                   /* regular (outlined) */
}

/* top: 5 solid stars, clipped to rating */
.fa-rating::after{
  content: var(--stars);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;                   /* solid */
  position: absolute;
  inset: 0 0 auto 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden;
  color: var(--color);                /* same gray as outline */
  pointer-events: none;
}