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, 2022 in CSS by Edureka
• 13,620 points
1,345 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, 2022 by Tanishqa
• 1,170 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, 2022 in CSS by Edureka
• 12,690 points
741 views
0 votes
1 answer

CSS - Darken image except for rectangle overlay

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

answered May 28, 2022 in CSS by Edureka
• 12,690 points
511 views
0 votes
1 answer

Change color of PNG image via CSS?

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

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
5,752 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, 2022 in Others by Aditya
• 7,680 points
6,006 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, 2022 in Blockchain by Rahul
• 9,670 points
745 views
0 votes
0 answers

how to use fontAwesome icon from css

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

Jul 29, 2022 in CSS by Edureka
• 13,620 points
405 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, 2022 in HTML by Deepak
• 980 points
1,517 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, 2022 in CSS by Tanishqa
• 1,170 points
474 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, 2022 in CSS by Tanishqa
• 1,170 points
5,677 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP