css - 如何制作带有 Font Awesome 图标的评分栏？

Question

我想创建一个带有超赞字体图标的评分栏。但是，我无法制作一个按颜色填充部分 (%) 的图标。

喜欢这张图片(图片已更新):Example

Answer 1

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

参见 fiddle 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;
}