如何在 Font Awesome 5 中使用不同的 Unicode 星形图标？

Font Awesome 5 Unicode 星级评级系统：常规与实心

在 Font Awesome 5 中，常规和实心星形图标具有不同的 unicode 值 ( ），但根据字体粗细，它们的外观有所不同。

用于交换星形版本的 CSS 代码：

要使用 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; /* Solid star */
}

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

实现：

要使用此星级评级系统：

1. 包含字体很棒的 CSS 文件：

   <code class="html"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"></code>

2. 创建一个带有星号类别的复选框输入：

   <code class="html"><input type="checkbox" class="star"></code>

3. 添加带有星号类别的标签复选框旁边：

   <code class="html"><label class="star"></label></code>

通过使用上面的 CSS 代码，单击复选框将在常规星号（字体粗细：200）和实心星星（字体粗细：900）。

以上是如何在 Font Awesome 5 中使用不同的 Unicode 星形图标？的详细内容。更多信息请关注PHP中文网其他相关文章！