css - 如何使用 ReactJS 和 Font-awesome 为半图标着色？

Question

我想为评级系统显示 font-awesome 中的一些图标。 此时我只想显示结果，但我没有找到如何只给星形图标的一半着色。

例如，如果比率是 3.5，我会显示 3 颗黄色星星，1 颗半颗黄色星星，其余为灰色。

有没有办法用 reactjs Font-aweosome 组件( 从 'react-fontawesome' 导入 FontAwesome;)?

Answer 1

无法为一半的 fontawesome 图标着色，但您可以尝试使用 this技术。

.header_star{
  float: left;
  margin-left: 10px;
  position: relative;
}
.header_star .fa.fa-star{
  font-size: 20px;
}
.header_star:hover {
  text-decoration: none;
}
.header_star .star_hover .fa.fa-star {
  color: #ffd200;
}
.star_hover {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: 0;
  transition: all 0.3s linear 0s;
}
.header_star:hover .star_hover {
  width: 92%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>


<div class="header_star">
  <a href="#" class="header_star"> 
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
    <div class="star_hover">          
      <i class="fa fa-star" aria-hidden="true"></i>
      <i class="fa fa-star" aria-hidden="true"></i>
      <i class="fa fa-star" aria-hidden="true"></i>
      <i class="fa fa-star" aria-hidden="true"></i>
      <i class="fa fa-star" aria-hidden="true"></i> 
    </div>
  </a>
</div>