如何为Font Awesome 5半星图标设置另一半灰色填充样式？

实现步骤 #

你现在用的fa-star-half本身只有半颗星的形状，没法直接显示另一半灰色，我们可以改用全星图标配合渐变实现完整星星半黄半灰的效果，改造成本很低：

1. 新增CSS样式

.star-half-color {
  /* 左半部分黄色，右半部分灰色的渐变 */
  background: linear-gradient(to right, #FFB319 50%, #EEEEEE 50%);
  /* 将背景裁剪为文字的形状 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字颜色设为透明，透出背景渐变 */
  color: transparent !important;
}

2. 修改对应星星的HTML代码
   把原来的半星图标从fa-star-half换成fa-star，class换成新增的star-half-color即可：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<i class="fas fa-star star-full-color"></i>
<i class="fas fa-star star-full-color"></i>
<!-- 替换半星部分的代码 -->
<i class="fas fa-star star-half-color"></i>
<i class="fas fa-star star-no-color"></i>
<i class="fas fa-star star-no-color"></i>

如果需要兼容不支持background-clip: text的老旧浏览器，可以改用双层图标叠加的方案，底层放灰色全星，上层放黄色半星，定位对齐即可。

内容的提问来源于stack exchange，提问作者Yousef Salama