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

Posted 2023-02-19

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

【英文标题】：If you use bootstrap 5 icon in star rating then there is problem of half star

【发布时间】：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 */

【参考方案1】：

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