HTML/CSS-字体真棒显示为正方形空间

Question

我正在尝试让 Font-Awesome (6.2.1) 正常工作，但它只显示为正方形。我不知道我是否链接正确，因为很棒的字体链接总是让我感到困惑。

有人有什么建议吗？它是我的购物车图标

#product1 .pro .des .cart{
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #e8f6ea;
    font-weight: 500;
    color: #088178;
    border: 1px solid #cce7d0;
    position: absolute;
    bottom: 20px;
    right: 10px;
}

 <div class="pro">
                <img src="casa-wacom-2-removebg-preview.png" alt="">
                <div class="des">
                 <span>Wacom</span>
                 <h5>Case para Wacom</h5>
                 <div class="star">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                 </div>
                 <a><i class="fa-light fa-cart-shopping cart"></i></a>
                 <h4>R$19,99</h4>
                </div>
                
            </div>

Answer 1

你的意思：

 <i class="fa-solid fa-star"></i>

？