CSS for star ratings via FontAwesome

0 votes

I've experimented with several alternative CSS star rating schemes, and I'm currently trying to build the following using FontAwesome rather than a sprite. Idealistically, I'd like to be able to add half stars, however the sample below falls short in this regard. So far, I've only tried this. The half or partial star isn't functioning properly in this case. Any advice would be highly appreciated.

.score {
  display: block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 19px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.score .stars-inactive {
  color: grey;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:88%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:50%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:100%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:0%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>
Aug 4 in CSS by Edureka
• 9,940 points
8 views

1 answer to this question.

0 votes

FontAwesome has added half stars to their arsenal for future reference. Include a link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel=" stylesheet "> in the head> section of your page and the following will provide the basic structure.

    <span class="score">
<div class="score-wrap">
    <span class="stars-active" style="width:88%">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-half" aria-hidden="true"></i>
    </span>
</span>
</div>

If you want the stars to be larger, change fa fa-star to fa fa-star 3x, where 3x represents the size, thus 3x, 4x, 5x, and so on. Use fa-star-o if you want a different style of star. If you want to alter the color, you can either edit it using CSS or add the colour to the class, for example, class="fa-star-o bg-light."

answered Aug 5 by Tanishqa
• 700 points

Related Questions In CSS

0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
46 views
0 votes
1 answer

CSS - Darken image except for rectangle overlay

Perhaps try constructing four boxes, one on ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
58 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
341 views
0 votes
1 answer
0 votes
1 answer

Font Awesome not working, icons showing as squares

You must have 2 classes, the fa ...READ MORE

answered Feb 22 in Others by Aditya
• 7,300 points
627 views
0 votes
1 answer

Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?

You also need to use the brands.css ...READ MORE

answered Mar 31 in Blockchain by Rahul
• 9,000 points
76 views
0 votes
0 answers

how to use fontAwesome icon from css

Can I use the font-awesome icon with ...READ MORE

Jul 29 in CSS by Edureka
• 9,940 points
14 views
0 votes
1 answer

how to use font awesome icons in HTML

First, you have to write this in ...READ MORE

answered Aug 4 in HTML by Deepak
• 760 points
20 views
0 votes
1 answer

What does CSS measurement unit 'em' actually stand for?

It stands for "emphemeral unit," which refers ...READ MORE

answered Aug 3 in CSS by Tanishqa
• 700 points
14 views
0 votes
1 answer

HTML and CSS: What do the <ul> and <li> tags stand for?

The term ul stands for unordered list. ...READ MORE

answered Aug 4 in CSS by Tanishqa
• 700 points
12 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP