Fontawesome 5 unicode

Question

Font-awesome 5星图标<i class="fas fa-star"></i>和<i class="far fa-star"></i>不同fas , far，两者的Unicode都是f005现在我想用它作为我的评分系统是常规星，点击成为实心星，但如何在我的CSS中定义fas far？

代码

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: 900;
}

我上面的代码只能得到稳固的明星

Answer 1

常规和实体版本之间的差异是font-weight。您只需调整此值即可在两个版本之间切换：

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;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<input type="checkbox" class="star">
<label class="star"></label>

以下是另一个相关问题Font Awesome 5 - Why it shows blank square when used in pseudo elements?以获取更多详情。

Answer 2

当处于非活动状态/默认状态时，不是100％确定您想要的星形类型，因此猜测您需要空心星。您可以通过将font-weight更改为400或900来更改FA5图标的外观。我通过演示中的重要评论放置了星星。剩下的更改只是可选的其他样式，例如text-shadows，transition上的:hover等等。虽然是可选的，但您应该尝试隐藏实际的复选框并只使用标签，它会更好审美IMO。

演示

input.star {
  /*⭐} By using the label as the interface (button) this can be hidden*/
  display: none;
}

.star {
  color: rgba(255, 255, 255, 0);
  text-shadow: .25px -.25px 1px #000;
  transition: .2s ease;
}

.star:hover {
  cursor: pointer;
  transition: .3s ease;
  text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}

input.star:checked~label.star:hover {
  transition: .3s ease;
  text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}

label.star::before {
  content: "\f005";
  /*⭐} Optional but recommended */
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  /*⭐} By lowering the font-weight, the icon is an outline */
  font-weight: 400;
  font-size: 32px;
}

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

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!------------{} Follow this pattern so that the label acts as a
------------------ remote button to the hidden checkbox-->

<!--⭐} Set an #id on checkbox-->
<input id='lucky' class='star' type='checkbox'>

<!--⭐} Set a [for] attribute with the value of checkbox #id-->
<label for='lucky' class='star'></label>

Answer 3

此外，值得注意的是，除了f005实心星星，FontAwesome还具有Unicode f006，这是一个空星星。至少在我使用的版本中是这样。