我一整天都在尝试改变颜色，但是效果不好。颜色改变了，但是图标被一个带X的正方形所取代。
html代码：
<a href="#"><i class="fas fa-regular fa-cart-shopping cart-color" ></i></a>
CSS代码：

#product1 .pro .cart-color{
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #F9D6D7;
    color: #953246;
    border: 1px solid #F9D6D7;
    position: absolute;
    bottom: 20px;
    right: 10px;
}

这就是我得到的：
what i get
我也有这些包括：

`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>`

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">`