0

So I found the following code on codepen (https://codepen.io/anon/pen/Edzxaj) to make a star rating, which works fine for Font Awesome 3.x and 4.x, but fails to produce the same result on 5.x when hovering over the stars.

/* Base setup */
@import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);

/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.1rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f005"; /* full star */
}

/* Half star trick */
.rate .half:before {
    content: "\f089"; /* half star no outline */
    position: absolute;
    padding-right: 0;
}

/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D;  } 
<fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
</fieldset>

Using the previous version of font awesome, hovering over the second half of the star would fill the star. In 5.x you need to hover the cursor all the way to the end of the star before it gets filled (I know this sounds a bit vague, but just compare the codepen and this example to see the difference in hovering). Is there any way to fix this?

YTZ
  • 876
  • 11
  • 26
  • 1
    Font Awesome completely changed how the rendering of icons works in v5. Is there a reason you can't use FA4? – Bryce Howitson Oct 30 '18 at 01:30
  • are you aware that you are include the PRO version where you need a licence? – Temani Afif Oct 30 '18 at 09:09
  • @BryceHowitson Well I already updated everything to FA5 except the rating on my website, so going back to FA4 for only this probably isn't worth it. – YTZ Oct 30 '18 at 13:52
  • @TemaniAfif I know, I have the free version for my own, but I saw some examples on codepen where you can use the pro version just to play around and see the new icons. I can update the code above with the free version, no big problem. – YTZ Oct 30 '18 at 13:55
  • @YTZ that seems to be working now that you changed to the free version. The only catch is you have to hover a bit to the right of the star to get the full thing filled... – Bryce Howitson Oct 30 '18 at 15:33
  • @BryceHowitson well that's the whole issue (like I tried to explain in the question). It annoys me (and probably other users too) to try to find that sweetspot at the end of the star to get it filled. I don't know if there's a workaround for this (yet). – YTZ Oct 30 '18 at 15:47
  • 1
    The "cause" of the hover waiting to happen until the cursor is almost off the half star is the `padding:0`. A solution would be to decrease the star container to only half the width (full star could even be used). I just haven't figured out how to do that yet. – Bryce Howitson Oct 30 '18 at 16:20
  • @BryceHowitson Okay that's good to know. I'll try some stuff out myself and maybe come up with a solution. Thanks for helping out btw. – YTZ Oct 30 '18 at 17:24

1 Answers1

1

I was able to solve this by "cutting" the star container in half. Extra space around the character was causing the hover to appear incorrectly large.

The catch is this requires setting a width which may or may not be a problem depending on your implementation.

.half Gets a width of roughly half the full star then overflow:hidden removes the extra half and margin-right moves the star back to the left. It's also using the full star icon for both displays so they line up better.

/* Base setup */
@import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);

/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.1rem;
    padding: .3rem .2rem;
    margin-right:0;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f005"; /* full star */
}

/* Half star trick */
.rate .half:before {
    content: "\f005"; /* half star no outline */
    position: absolute;
    padding-right: 0;
    width: 0.6rem;
    overflow: hidden;
    margin-right: 0.4rem;
}

/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D;  } 
<fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
</fieldset>
Bryce Howitson
  • 7,339
  • 18
  • 40
  • Love it. Also thanks for the short explanation, that really clears things up (especially for a CSS beginner). – YTZ Oct 30 '18 at 19:25