Как раскрасить половинную иконку, используя ReactJS и Font-awesome? - PullRequest
Новая
       10

Как раскрасить половинную иконку, используя ReactJS и Font-awesome?

0 голосов
/ 25 сентября 2018

Я хочу отобразить несколько значков шрифтов-офигенных для рейтинговой системы.На данный момент я просто хочу отобразить результат, но я не нашел, как закрасить только половину значка звезды.

Например, если показатель равен 3,5, я бы отобразил 3 желтые звезды, 1 половину звездыжёлтым, а остальные серым.

Есть ли способ сделать это с помощью компонента Font-Aweosome реагирующих (импортировать FontAwesome из 'response-fontawesome';)?

1 Ответ

0 голосов
/ 25 сентября 2018

Невозможно раскрасить половину изумительных значков, но вы можете попробовать использовать эту технику.

.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>
...