How to change the color of an Font Awesome icon?

Question

I have been trying all day to change the color but it's not working properly. The color change but the icon is replaced with a square with an X in it.

#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;
    }

<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">

<a href="#"><i class="fas fa-regular fa-cart-shopping cart-color"></i></a>

this is what i get:

I also have these included:

<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">

Take a look here https://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-cog-icon — jonu29, Nov 29 '22 at 19:08
Welcome to StackOverflow. Please never post images of code. Instead, format and include the code in the question itself. — Sean, Nov 29 '22 at 19:40
Please [edit] to convert your images of text into actual text. [See here](https://meta.stackoverflow.com/a/285557/20170164) for why. — rainbow.gekota, Nov 30 '22 at 01:32

score 0 · Answer 1 · answered Nov 29 '22 at 19:33

When you see the icons like that it means that it is wrong with the included css. I'm using a cdn in the code snippet below and everything works fine:

.fa-cart-shopping{
padding:8px;
border-radius: 50%;
background-color: #F9D6D7;
color: #954246;
border: 1px solid #f9d6D7;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <i class="fa-solid fa-cart-shopping"></i>
</body>
</html>

A tip: don't use font-weight css rule for this icons, instead you can use the variants. All the variants are on the official website

score 0 · Answer 2 · answered Dec 01 '22 at 18:05

Your .pro and .fa-regular class names indicate you're trying to use fontAwesome pro icons.

These icons won't be rendered unless you've purchased a pro licence and included a use-kit

However you can still prepend the fas class to get the standard solid icon as fallback.

.cart-color{
        color: #953246;
}

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

<p>Free icon -included in your fontAwesome css</p>
<i class="fas fa-cart-shopping cart-color"></i>

<p>Pro icon - won't render unless you included your licensed bootrtrap pro css</p>
<i class="fa-regular fa-cart-shopping cart-color"></i>

<p>Pro icon with free fallback - free icon displayed</p>
<i class="fas fa-regular fa-cart-shopping cart-color"></i>

How to change the color of an Font Awesome icon?

2 Answers2