-1

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>

enter image description here

vimuth
  • 5,064
  • 33
  • 79
  • 116
Prem Singh
  • 320
  • 2
  • 16
  • I haven't understand your question... can you elaborate more? – Lucas Campos Sep 03 '21 at 07:35
  • .rate > label:before { display: inline-block; font-size: 2rem; padding: .3rem .2rem; margin: 0; cursor: pointer; font-family: FontAwesome; /* I want to use here bootstrap-icons */ content: "\f005 "; /* full star */ } /* Half star trick */ .rate .half:before { content: "\f089 "; /* half star no outline */ position: absolute; padding-right: 0; } I want to use here bootstrap-icons */ – Prem Singh Sep 03 '21 at 07:49

1 Answers1

0

I have used FontAwesome Icons then problem is solved

Prem Singh
  • 320
  • 2
  • 16