Question

我想显示一些字体很棒的图标，用于评级系统。此时，我只想显示结果，但是我没找到如何只给星形图标的一半上色。

例如，如果比率为3.5，则我将显示3个黄色星星，其中1个半星显示为黄色，其余的显示为灰色。

是否有一种方法可以使用reactjs Font-aweosome组件（从'react-fontawesome'导入FontAwesome;）？

Answer 1

不可能给半色调的字体着色，但是您可以尝试使用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>

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

1 个答案: