CODEWITHSUNDEEP
cssfont-awesome
Masih Jahangiri
Masih Jahangiri

Reputation: 10957

how to make rating bar with font awesome icon?

I want to create a rating bar with font awesome icon. but, I can't make a icon that fill part of that (%) by color.

like this image (image updated) : Example

Upvotes: 1

Views: 468

Answers (1)

c01gat3
c01gat3

Reputation: 597

This is not a very elegant solution but might help you get a few ideas.

see 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;
}

Upvotes: 1

Related Questions