Font Awesome Half-Star Icon Without Spacing-CodePudding

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.

Project code:

/*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 >
  <input id="Note-5" name="note" type="radio" value="5" />
  <label  for="Note-5" title="Note 5/5"></label>

  <input id="Note-4-5" name="note" type="radio" value="4.5" />
  <label  for="Note-4-5" title="Note 4.5/5"></label>

  <input id="Note-4" name="note" type="radio" value="4" />
  <label  for="Note-4" title="Note 4/5"></label>

  <input id="Note-3-5" name="note" type="radio" value="3.5" />
  <label  for="Note-3-5" title="Note 3.5/5"></label>

  <input id="Note-3" name="note" type="radio" value="3" />
  <label  for="Note-3" title="Note 3/5"></label>

  <input id="Note-2-5" name="note" type="radio" value="2.5" />
  <label  for="Note-2-5" title="Note 2.5/5"></label>

  <input id="Note-2" name="note" type="radio" value="2" />
  <label  for="Note-2" title="Note 2/5"></label>

  <input id="Note-1-5" name="note" type="radio" value="1.5" />
  <label  for="Note-1-5" title="Note 1.5/5"></label>

  <input id="Note-1" name="note" type="radio" value="1" />
  <label  for="Note-1" title="Note 1/5"></label>

  <input id="Note-0-5" name="note" type="radio" value="0.5" />
  <label  for="Note-0-5" title="Note 0.5/5"></label>
</div>

Question:

Is there a solution to this problem other than using 2 versions of Font Awesome libraries in my project ?

Additional Notes:

I am also using Bootstrap 5 and JQuery in my project so any solution involving them is fine by me.

CodePudding user response：

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 >
  <input id="Note-5" name="note" type="radio" value="5" />
  <label  for="Note-5" title="Note 5/5"></label>

  <input id="Note-4-5" name="note" type="radio" value="4.5" />
  <label  for="Note-4-5" title="Note 4.5/5"></label>

  <input id="Note-4" name="note" type="radio" value="4" />
  <label  for="Note-4" title="Note 4/5"></label>

  <input id="Note-3-5" name="note" type="radio" value="3.5" />
  <label  for="Note-3-5" title="Note 3.5/5"></label>

  <input id="Note-3" name="note" type="radio" value="3" />
  <label  for="Note-3" title="Note 3/5"></label>

  <input id="Note-2-5" name="note" type="radio" value="2.5" />
  <label  for="Note-2-5" title="Note 2.5/5"></label>

  <input id="Note-2" name="note" type="radio" value="2" />
  <label  for="Note-2" title="Note 2/5"></label>

  <input id="Note-1-5" name="note" type="radio" value="1.5" />
  <label  for="Note-1-5" title="Note 1.5/5"></label>

  <input id="Note-1" name="note" type="radio" value="1" />
  <label  for="Note-1" title="Note 1/5"></label>

  <input id="Note-0-5" name="note" type="radio" value="0.5" />
  <label  for="Note-0-5" title="Note 0.5/5"></label>
</div>