CODEWITHSUNDEEP
font-awesome
Manish
Manish

Reputation: 1447

How to fill the first two stars in font awesome star rating?

I'm trying to change color of first two stars in fontawesome star rating at http://fortawesome.github.io/Font-Awesome/examples/

I have assigned a class to first & second span but it is not working

My html is

<span class="rating">
<span class="star filled"></span>
<span class="star filled"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>

and my css is

.rating {
       unicode-bidi:bidi-override;
       direction:rtl;
       font-size:30px;
}
.rating span.star {
      font-family:FontAwesome;
      font-weight:normal;
      font-style:normal;
      display:inline-block;
}
.rating span.star:hover {
     cursor:pointer;
}
.rating span.star:before {
     content:"\f006";
     padding-right:5px;
     color:#999999;
}
.rating span.star:hover:before, .rating span.star:hover~span.star:before {
     content:"\f005";
     color:#e3cf7a;
}


.filled{ color:#e3cf7a; }

JSFIDDLE http://jsfiddle.net/code_snips/ttyYD/

Upvotes: 4

Views: 11673

Answers (3)

Christian
Christian

Reputation: 46

  1. .filled is not specific enough, use span.star.filled
  2. Moreover, the icons are actually styled through :before, so use span.star.filled:before{ color:#e3cf7a; }
  3. If you want the star to be filled, add content:"\f005";, too.

But this is probably still not what you want; you might not have noticed, but the .rating class changes the text direction (unicode-bidi:bidi-override; direction:rtl;).

So, you'd need to apply the filled class to the last two span tags.

Upvotes: 3

Suresh Pattu
Suresh Pattu

Reputation: 6209


Try this one
Jsfiddle Script:

$('.rating span.star').click(function(){
                var total=$(this).parent().children().length;
                var clickedIndex=$(this).index();
                $('.rating span.star').removeClass('filled');
                for(var i=clickedIndex;i<total;i++){
                    $('.rating span.star').eq(i).addClass('filled');
                }
            });

Upvotes: 3

alpc
alpc

Reputation: 610




.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }




   <span class="rating" style="font-size:13px;"><span class="star"></span><span class="star"></span><span class="star filled"></span><spanclass="star filled"></span><span class="star filled"></span></span>

Upvotes: 0

Related Questions