如何在CSS中定义Font Awesome 5的fas/far类实现星形评分切换？

嘿，我明白你想做的评分系统需求——初始显示空心星，点击切换成实心星对吧？其实Font Awesome 5里的fas和far本质上是通过字体权重来区分的，根本不需要单独定义这两个类，直接用CSS的font-weight就能实现效果，我给你一步步拆解：

核心原理 #

Font Awesome 5的Solid样式（fas）对应font-weight: 900，Regular样式（far）对应font-weight: 400，它们共用同一个Unicode（\f005），所以我们只需要通过切换font-weight就能实现空心/实心的变化。

完整实现代码 #

HTML部分

<div class="rating">
  <input type="radio" name="star" class="star" id="star5" />
  <label for="star5" class="star"></label>
  <input type="radio" name="star" class="star" id="star4" />
  <label for="star4" class="star"></label>
  <input type="radio" name="star" class="star" id="star3" />
  <label for="star3" class="star"></label>
  <input type="radio" name="star" class="star" id="star2" />
  <label for="star2" class="star"></label>
  <input type="radio" name="star" class="star" id="star1" />
  <label for="star1" class="star"></label>
</div>

CSS部分

/* 隐藏原生单选框 */
input.star {
  display: none;
}

/* 初始状态：空心星星 */
label.star {
  font-size: 2rem;
  color: #ccc;
  cursor: pointer;
  display: inline-block;
  transition: all .25s;
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; /* 对应far类的空心样式 */
}

/* 鼠标悬浮时的半实心效果（可选，提升交互体验） */
label.star:hover,
label.star:hover ~ label.star {
  color: #e74c3c;
}

label.star:hover:before,
label.star:hover ~ label.star:before {
  font-weight: 900; /* 悬浮时切换成实心 */
}

/* 选中后的实心星星 */
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #e74c3c;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* 对应fas类的实心样式 */
}

/* 选中星星之前的所有星星也变成实心（实现星级评分的连续高亮） */
input.star:checked ~ label.star,
input.star:checked ~ label.star ~ label.star {
  color: #e74c3c;
}

input.star:checked ~ label.star:before,
input.star:checked ~ label.star ~ label.star:before {
  font-weight: 900;
}

关键细节说明 #

• 我们不需要手动写<i class="fas/far fa-star"></i>，而是通过label:before的伪元素生成星星图标，这样更容易通过CSS控制状态切换。
• 初始状态的font-weight:400就是far的效果，选中后改成font-weight:900就变成fas的实心效果，完美对应你要的两种星形。
• 额外加了悬浮和连续高亮的效果，让评分系统的交互更自然，你可以根据需求调整颜色、大小这些样式参数。

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