如果您在星级中使用 bootstrap 5 图标，则存在半星问题

Question

如果你使用bootstrap 5 星评级图标，则存在半星问题

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

我用了FontAwesome图标，问题解决了

如果您在星级中使用 bootstrap 5 图标，则存在半星问题

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

rating

review