For version 4.7.0, Font Awesome's Half-Star icon is properly done, but for version 6 it has additionnal spacing on the right were it shouldn't (see screenshots). Half-Star icon version 4.7 Half-Star icon version 6
I am working on a rating system (FontAwesome v6.1.2) where I have both the full star and the half star is overlayed on top, but the half star covers the full star icon and there's no way to actually select the full star. My App
I tried both inline tag and using unicode in a css file without success.
/*Source From Codepen https://codepen.io/jamesbarnett/pen/najzYK*/
/*Style Star Rating Widget*/
.user-rating-div {
border: none;
float: left;
/*margin: 20px;*/
}
.user-rating-label {
margin: 0;
padding: 0;
}
.user-rating-div input {
display: none;
}
.user-rating-div label:before {
cursor: pointer;
/*position: relative;*/
margin-right: 1rem;
font-size: 2rem;
font-family: FontAwesome;
display: inline-block;
content: "\f005"; /*Full star*/
}
.user-rating-div .user-rating-star-half:before {
content: "\f089"; /*half star*/
position: absolute;
margin-right: -5rem !important;
}
.user-rating-div label {
color: grey;
float: right;
}
/*Highlight Stars on Hover*/
.user-rating-div input:checked ~ label, /* show gold star when clicked */
.user-rating-div:not(:checked) label:hover, /* hover current star */
.user-rating-div:not(:checked) label:hover ~ label { /* hover previous stars in list */
color: orange;
}
.user-rating-div input:checked + label:hover, /* hover current star when changing rating */
.user-rating-div input:checked ~ label:hover,
.user-rating-div label:hover ~ input:checked ~ label, /* lighten current selection */
.user-rating-div input:checked ~ label:hover ~ label {
color: gold;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="user-rating-div">
<input id="Note-5" name="note" type="radio" value="5" />
<label class="user-rating-label user-rating-star-full" for="Note-5" title="Note 5/5"></label>
<input id="Note-4-5" name="note" type="radio" value="4.5" />
<label class="user-rating-label user-rating-star-half" for="Note-4-5" title="Note 4.5/5"></label>
<input id="Note-4" name="note" type="radio" value="4" />
<label class="user-rating-label user-rating-star-full" for="Note-4" title="Note 4/5"></label>
<input id="Note-3-5" name="note" type="radio" value="3.5" />
<label class="user-rating-label user-rating-star-half" for="Note-3-5" title="Note 3.5/5"></label>
<input id="Note-3" name="note" type="radio" value="3" />
<label class="user-rating-label user-rating-star-full" for="Note-3" title="Note 3/5"></label>
<input id="Note-2-5" name="note" type="radio" value="2.5" />
<label class="user-rating-label user-rating-star-half" for="Note-2-5" title="Note 2.5/5"></label>
<input id="Note-2" name="note" type="radio" value="2" />
<label class="user-rating-label user-rating-star-full" for="Note-2" title="Note 2/5"></label>
<input id="Note-1-5" name="note" type="radio" value="1.5" />
<label class="user-rating-label user-rating-star-half" for="Note-1-5" title="Note 1.5/5"></label>
<input id="Note-1" name="note" type="radio" value="1" />
<label class="user-rating-label user-rating-star-full" for="Note-1" title="Note 1/5"></label>
<input id="Note-0-5" name="note" type="radio" value="0.5" />
<label class="user-rating-label user-rating-star-half" for="Note-0-5" title="Note 0.5/5"></label>
</div>Is there a solution to this problem other than using 2 versions of Font Awesome libraries in my project ?
I am also using Bootstrap 5 and JQuery in my project so any solution involving them is fine by me.
Use the full start for both of them and rely on clip-path to cut the half of it each time
/*Source From Codepen https://codepen.io/jamesbarnett/pen/najzYK*/
/*Style Star Rating Widget*/
.user-rating-div {
border: none;
float: left;
/*margin: 20px;*/
}
.user-rating-label {
margin: 0;
padding: 0;
}
.user-rating-div input {
display: none;
}
.user-rating-div label:before,
.user-rating-div .user-rating-star-half:before{
cursor: pointer;
/*position: relative;*/
margin-right: 1rem;
font-size: 2rem;
font-family: FontAwesome;
display: inline-block;
content: "\f005"; /*Full star*/
clip-path:inset(0 0 0 50%);
}
.user-rating-div .user-rating-star-half:before {
margin-right: -5rem !important;
clip-path:inset(0 50% 0 0);
}
.user-rating-div label {
color: grey;
float: right;
}
/*Highlight Stars on Hover*/
.user-rating-div input:checked ~ label, /* show gold star when clicked */
.user-rating-div:not(:checked) label:hover, /* hover current star */
.user-rating-div:not(:checked) label:hover ~ label { /* hover previous stars in list */
color: orange;
}
.user-rating-div input:checked + label:hover, /* hover current star when changing rating */
.user-rating-div input:checked ~ label:hover,
.user-rating-div label:hover ~ input:checked ~ label, /* lighten current selection */
.user-rating-div input:checked ~ label:hover ~ label {
color: gold;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="user-rating-div">
<input id="Note-5" name="note" type="radio" value="5" />
<label class="user-rating-label user-rating-star-full" for="Note-5" title="Note 5/5"></label>
<input id="Note-4-5" name="note" type="radio" value="4.5" />
<label class="user-rating-label user-rating-star-half" for="Note-4-5" title="Note 4.5/5"></label>
<input id="Note-4" name="note" type="radio" value="4" />
<label class="user-rating-label user-rating-star-full" for="Note-4" title="Note 4/5"></label>
<input id="Note-3-5" name="note" type="radio" value="3.5" />
<label class="user-rating-label user-rating-star-half" for="Note-3-5" title="Note 3.5/5"></label>
<input id="Note-3" name="note" type="radio" value="3" />
<label class="user-rating-label user-rating-star-full" for="Note-3" title="Note 3/5"></label>
<input id="Note-2-5" name="note" type="radio" value="2.5" />
<label class="user-rating-label user-rating-star-half" for="Note-2-5" title="Note 2.5/5"></label>
<input id="Note-2" name="note" type="radio" value="2" />
<label class="user-rating-label user-rating-star-full" for="Note-2" title="Note 2/5"></label>
<input id="Note-1-5" name="note" type="radio" value="1.5" />
<label class="user-rating-label user-rating-star-half" for="Note-1-5" title="Note 1.5/5"></label>
<input id="Note-1" name="note" type="radio" value="1" />
<label class="user-rating-label user-rating-star-full" for="Note-1" title="Note 1/5"></label>
<input id="Note-0-5" name="note" type="radio" value="0.5" />
<label class="user-rating-label user-rating-star-half" for="Note-0-5" title="Note 0.5/5"></label>
</div>