html - 半 Font Awesome 心脏评级CSS

我正在生成一个评级系统使用字体可怕的fa心脏类。把整个心脏染成红色效果很好，但我在试着只把心脏的前半部分涂成红色时遇到了麻烦。
我一直在寻找，但始终是星星而不是半颗心，始终心满意足而不是从字体可怕。
字体可怕的版本使用4.0.3，不能更改。。。
有什么办法吗？

.full {
  color:red;
}
.half {

}

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

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>   

最佳答案

下面是另一个想法，您可以通过简单地调整宽度值轻松获得任何类型的评级：

.full {
  color: red;
}

.rating-love {
  position: relative;
  display:inline-block;
}

.rate {
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

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

<div class="rating-love ">
  <span class="fa fa-heart"></span>
  <span class="fa fa-heart "></span>
  <span class="fa fa-heart"></span>
  <span class="fa fa-heart"></span>
  <span class="fa fa-heart"></span>
  <span class="rate" style="width:50%;"> <!-- change this value for 0 to 100 -->
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
  </span>
</div>
  <a href="#reviews"><span>23 Review(s)</span></a>