如何将 Font Awesome 5 Unicode 用于常规和实心星星？

Font Awesome 5 Unicode（用于常规和实心星星）

Font Awesome 5 引入了用于常规和实心星星的“far”和“fas”前缀图标，分别。虽然两个前缀具有相同的 Unicode ('f005')，但它们代表不同的字体粗细。在 CSS 中使用它们时，理解这种区别至关重要。

在您的代码片段中，您提到您只能获得实心星星。这是因为您已将选中和未选中星形状态的字体粗细设置为 900。为了实现预期的行为，让普通星星最初在点击时变得稳定，您需要相应地调整字体粗细。

下面更新的 CSS 可以处理这个问题：

<code class="css">input.star:checked ~ label.star:before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200;
}</code>

在如上所述，选中的星形状态的字体粗细保持在 900，从而形成实心星形。然而，对于未选中的状态，font-weight 设置为 200，从而产生常规的星号。此设置可确保单击时星星在常规和实心之间变化。

以上是如何将 Font Awesome 5 Unicode 用于常规和实心星星？的详细内容。更多信息请关注PHP中文网其他相关文章！