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

【问题标题】：If you use bootstrap 5 icon in star rating then there is problem of half star如果您在星级评分中使用 bootstrap 5 图标，则存在半星问题
【发布时间】：2021-11-01 13:24:39
【问题描述】：

如果你在星级评分中使用 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>

【问题讨论】：

我没明白你的问题...你能详细说明一下吗？
.rate > label:before { display: inline-block;字体大小：2rem；填充：.3rem .2rem；边距：0；光标：指针；字体系列：FontAwesome； /* 我想在这里使用 bootstrap-icons / content: "\f005 "; / 满星 / } / 半星把戏 / .rate .half:before { content: "\f089 "; / 半星无轮廓 */ position: absolute;填充权：0；我想在这里使用 bootstrap-icons */

标签： rating review

【解决方案1】：

我用过FontAwesome图标然后问题就解决了

【讨论】：