如何修改Font Awesome图标颜色？图标变色后显示带叉方块求助

问题根源 #

• 同时引入了两个不同版本的Font Awesome（v6.2.1和v4.4.0），版本冲突导致图标资源加载异常
• 图标类名错误：同时混用fas（实心前缀）和fa-regular（空心前缀），且fa-cart-shopping是Font Awesome 6.x专属图标，v4.4.0中不存在该图标

修复步骤 #

1. 删除旧版本引用：只保留Font Awesome 6.2.1的样式链接，避免版本冲突
2. 修正图标类名：根据需求选择单一前缀（实心/空心），比如空心购物车用fa-regular fa-cart-shopping，实心用fas fa-cart-shopping
3. 你的CSS样式无需修改，颜色设置是正常的，只要图标加载正常就能生效

修复后的完整代码 #

HTML代码

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

<a href="#"><i class="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;
    }

效果说明 #

修复后图标会正常显示为购物车样式，同时保持你设置的背景色#F9D6D7和图标颜色#953246。

内容的提问来源于stack exchange，提问作者Ciupeanu D Iulia Gabriela