字体真棒5 Unicode

一尘不染

字体真棒5 Unicode

css

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

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

阅读 426

2020-05-16

共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.13.0/css/all.css">



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

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

这是另一个相关的问题，伪元素上的Font Awesome5显示更多[而不是图标显示为正方形

2020-05-16