在Django项目中基于FontAwesome 5.13实现星级评分展示的问题

FontAwesome 5.13 适配后代码 #

你可以直接替换原有模板代码即可实现和v4版本完全一致的评分展示效果：

<div class="rating-star">
    <span>
        <i class="{% if review.rating == 0.5 %}fas fa-star-half-alt{% elif review.rating < 1 %}far fa-star{% else %}fas fa-star{% endif %}" aria-hidden="true"></i>
        <i class="{% if review.rating == 1.5 %}fas fa-star-half-alt{% elif review.rating < 2 %}far fa-star{% else %}fas fa-star{% endif %}" aria-hidden="true"></i>
        <i class="{% if review.rating == 2.5 %}fas fa-star-half-alt{% elif review.rating < 3 %}far fa-star{% else %}fas fa-star{% endif %}" aria-hidden="true"></i>
        <i class="{% if review.rating == 3.5 %}fas fa-star-half-alt{% elif review.rating < 4 %}far fa-star{% else %}fas fa-star{% endif %}" aria-hidden="true"></i>
        <i class="{% if review.rating == 4.5 %}fas fa-star-half-alt{% elif review.rating < 5 %}far fa-star{% else %}fas fa-star{% endif %}" aria-hidden="true"></i>
    </span>
</div>

核心调整说明 #

• FontAwesome 5 拆分了不同样式的图标前缀：实心星前缀为fas，空心星前缀为far，不能像v4版本一样仅通过修改后缀实现样式切换，需要直接通过判断返回完整class值
• 半星对应v5的类名为fas fa-star-half-alt，和你原有代码里的半星类名保持一致即可
• 原有逻辑完全复用：仅当评分等于对应半星值时展示半星，评分小于当前星对应的分值时展示空心星，其余情况展示实心星

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