如何使用字体真棒图标制作评级栏？

Question

我想创建一个带有字体真棒图标的评级栏。 但是，我无法通过颜色制作一个可以填充其中一部分（％）的图标。

喜欢此图片（图片已更新）：Example

Answer 1

这不是一个非常优雅的解决方案，但可能会帮助您获得一些想法。

请参阅小提琴https://jsfiddle.net/fbr4b6fd/

<div class="container"><span class="fill"></span><i class="fa fa-meh-o"></i></div>

.container{
    display: inline-block;
    border-radius:50px;
    background-color: #FFFFFF;
    width: 81px;
    height: 81px;
    overflow: hidden;
    position:relative;
}
.fill{
    background-color: #FF0000;
    height: 100%;
    width: 75%;
    position:absolute;
    left:0;
    top:0; 
}
.fa{
    font-size:100px;
    position:relative;
    top: -10px;
    left: -2px;
}