Fontawesome 5 unicode

Question

字体真棒5星图标有<i class="fas fa-star"></i>和<i class="far fa-star"></i>不同是fas , far和两者的Unicode f005现在我想用它作为我的评级系统,其中第一个是常规明星,点击成为实心明星,但我如何fas far在我的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: 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在CSS中直接使用时显示正方形而不是图标以获取更多细节.