使用Bootstrap 5 Icon实现星级评分时半星显示异常如何解决？

你遇到的问题是由于使用了FontAwesome的字体族和图标编码，和Bootstrap Icons不匹配导致的，按如下方式修改即可：

修正后代码 #

CSS 部分

/* 给label添加相对定位，避免半星绝对定位错位 */
.rate > label {
    position: relative;
}
/* 满星样式 */
.rate > label:before {
    display: inline-block;
    font-size: 2rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: 'bootstrap-icons'; /* 替换为bootstrap-icons字体族 */
    content: "\F586 "; /* bootstrap-icons实心满星对应的unicode编码 */
}

/* 半星样式 */
.rate .half:before {
    content: "\F585 "; /* bootstrap-icons半星对应的unicode编码 */
    position: absolute;
    left: 0;
    padding-right: 0;
}

HTML 部分

如果使用伪元素方案实现星级评分，无需额外添加半星i标签，按你原有评分组件的HTML结构使用即可。如果需要单独使用半星图标，直接使用如下代码即可正常显示：

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

注意事项 #

• 确保已在项目中正确引入Bootstrap Icons样式文件
• 编码注意大小写，Bootstrap Icons的unicode编码为大写格式
• 半星的绝对定位依赖父元素label的相对定位属性，不可省略

内容的提问来源于stack exchange，提问作者Prem Singh