字体真棒5 unicode

Question

Font Awesome 5 star icon has <i class="fas fa-star"></i> and <i class="far fa-star"></i> different is fas , far and Unicode for both is f005 now i want to use it as my评级系统首先是普通星，然后通过点击变成实心星，但是我如何在我的 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;
}

使用上面的代码，我只能得到实心星

原文由 mafortis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 JS+SVG 版本，请阅读： Font Awesome 5 shows empty square when using the JS+SVG version

普通 版和 实体 版的区别在于 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.13.0/css/all.css">

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

这是另一个相关问题 Font Awesome 5 on pseudo elements shows square 而不是 icon 以获取更多详细信息。

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不是 100% 确定在非活动/默认状态下你想要什么类型的星星，所以猜测你需要空心星星。您可以通过将 font-weight 更改为 400 或 900 --- 来显着改变 FA5 图标的外观。我在演示中的重要评论旁边加了星。其余的更改只是可选的杂项样式，例如 text-shadows ， 2 way transition s on :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>

原文由 zer00ne 发布，翻译遵循 CC BY-SA 4.0 许可协议