字体真棒5 Unicode

Z时代
2024-01-10
分类：问答

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

与我上面的代码我只会得到坚实的星星

回答：

版和版之间的区别是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>