If you use bootstrap 5 icon in star rating then there is problem of half star

Question

If you use bootstrap 5 icon in star rating then there is problem of half star

CSS

/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 2rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome; /* I want to use bootstrap-icons */
    content: "\f005 "; /* full star */
}

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

HTML

<i class="bi bi-star-half"></i>

Answer 1

I have used FontAwesome Icons then problem is solved