Half font awesome heart rating css

Question

I'm generating a rating system using font-awesome fa-heart class. It is working fine by colouring the full heart, but I'm in trouble when trying to fill it in red only the first half of the heart. I have been searching but always are stars and not a half-heart, always full heart and not from font-awesome.

Font awesome version used 4.0.3 and cannot be changed...

Any trick to do that?

.full {
  color:red;
}
.half {

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>

FA is an icon font, so each icon is a single glyph. As far as I'm aware there's no way in HTML/CSS/JS to have a single glyph have different colours. You could do something like use a paler colour for a "partial" heart. — jonrsharpe, Aug 07 '18 at 15:36
Not dupe, but related: https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character — James Douglas, Aug 07 '18 at 16:45

score 4 · Answer 1 · answered Aug 07 '18 at 15:44

4

This can be done using text Clip & Background Gradient, I hope this trick will work for you too. I just made a gradient with 2 colors and divided them with clip its looking fine. You can make half of the heart white if you want just by changing the hexcode in css.

.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.full {
  color:red;
}
.half {

}
.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>

answered Aug 07 '18 at 15:44

Robin

81
6

1

Nice solution! Unfortunately it probably isn't very cross-browser compatible, but still a really good idea. – James Douglas Aug 07 '18 at 16:02
`text-stroke` Is not supported in IE. https://caniuse.com/#feat=text-stroke – James Douglas Aug 07 '18 at 16:22
@JamesDouglas Yes Unfortunately IE is not supporting Text-stroke, :( – Robin Aug 07 '18 at 16:34
1

That’s the approach I was looking for. Its a pity that it is not working on IE but anyway, thanks! – Albeis Aug 07 '18 at 18:33
1

I will look for options if somehow this solution is possible in IE, will update you here. – Robin Aug 07 '18 at 19:25

Temani Afif · Accepted Answer · 2018-08-07T18:51:23.057

4

Here is another idea where you can easily have any kind of rating by simply adjusting a width value:

.full {
  color: red;
}

.rating-love {
  position: relative;
  display:inline-block;
}

.rate {
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
  <span class="fa fa-heart"></span>
  <span class="fa fa-heart "></span>
  <span class="fa fa-heart"></span>
  <span class="fa fa-heart"></span>
  <span class="fa fa-heart"></span>
  <span class="rate" style="width:50%;"> <!-- change this value for 0 to 100 -->
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
    <span class="fa fa-heart full"></span>
  </span>
</div>
  <a href="#reviews"><span>23 Review(s)</span></a>

edited Aug 07 '18 at 18:51

answered Aug 07 '18 at 15:47

Temani Afif

211,628
17
234
311

Semantically though, giving all the hearts the `full` class isn't really the best thing to do. – j08691 Aug 07 '18 at 15:51
This is an interesting take on the problem; only problem is using a fixed width in the `.rate` span because FA icons are text and there is no actual fixed width. – James Douglas Aug 07 '18 at 16:09
@JamesDouglas no need to use fixed width :) .. you can use % also if you remove the other text and make it outside. In this case 100% width will be the width of the 5 stars whataver the font-size is – Temani Afif Aug 07 '18 at 18:36
Thanks @TemaniAfif! Goog approach but dificult to adjust the width when generating dinamically. – Albeis Aug 07 '18 at 18:42
@Albeis check again it's updating with % now ;) – Temani Afif Aug 07 '18 at 18:51
1

finally I have used your aproach :) – Albeis Sep 03 '18 at 14:00
mannn you saved me soo much time this is an excellent solution thank you! – d0rf47 Sep 02 '21 at 21:08

score 3 · Answer 3 · edited Aug 07 '18 at 16:27

3

Without using JavaScript you'd cut the width of the span to half, hiding the overflow.

.full {
  color: red;
  vertical-align:text-bottom;
}

.half {
  color: red;
  width: 8px;
  overflow: hidden;
  vertical-align:text-bottom;
  margin-right: 8px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart half"></span>
  <a href="#reviews"><span>23 Review(s)</span></a>
</div>

edited Aug 07 '18 at 16:27

James Douglas

3,140
2
21
42

answered Aug 07 '18 at 15:42

j08691

197,815
30
248
265

This works, but there is some margin above the last heart which ruins the effect... – James Douglas Aug 07 '18 at 16:05
@JamesDouglas Incorrect, the last heart span has no margin other than the right one which I gave it. So, nothing ruined. – j08691 Aug 07 '18 at 16:13
I see margin on my computer. I am using Firefox on OSX. [Here is a screenshot of what I see.](https://s8.postimg.cc/vvaz6kgp1/Screen_Shot_2018-08-07_at_17.18.09.png) – James Douglas Aug 07 '18 at 16:19
@JamesDouglas Looks like the vertical align instead. – j08691 Aug 07 '18 at 16:22
It can be solved by adding `vertical-align:text-bottom;` to the `.full` spans as well; I have taken the liberty to edit your answer to include it. – James Douglas Aug 07 '18 at 16:28

Half font awesome heart rating css

3 Answers3