Trying to introduce Icons into my work but I am not able to change the color of the Icons(font-aweso-CodePudding

.social-icon{
color: white;
}


.fa-solid{
  color: var(--primary-color);
}

 <div class=" col-6">
          <a href=""><i class="fa-brands fa-twitter fa-40x social-icon"></i></a>
          <a href=""><i class="fa-brands fa-facebook fa-40x social-icon"></i></a>
          <a href=""> <i class="fa-brands fa-instagram fa-40x social-icon"></i></a>
        </div>
        
        
        
<div>
                <a class="carousel-control-prev" href="#testimonial-cards" data-bs-slide="prev">
                  <span class="fa fa-solid fa-circle-chevron-left  fa-1x carousel-control-prev-icon"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#testimonial-cards" data-bs-slide="next">
                  <span class=" fa fa-solid fa-circle-chevron-right fa-1x carousel-control-next-icon"></span>
                  <span class="sr-only">next</span>
                </a>
              </div>

I have been trying to change the social media and control icon colors but I am not able to affect them. Check the code and kindly assist. Thank you.

CodePudding user response：

With little information, it's unclear which CSS rule you want to apply:

.social-icon{
   color: white;
}


.fa-solid{
   color: var(--primary-color);
}

Assuming, you need .fa-solid to apply, just increase the specificity of the selector in this way:

i.fa-solid{
  color: var(--primary-color);
}

Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

CodePudding user response：

Firstly you need to hook up fontawesome appropriate ;-) Then you can manipulate it according to your preferences ;-)

.social-icon {
  color: blue;
}

.fa-solid {
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="main.css" />
  <title>Icons</title>
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
  <div class="col-6">
    <a href=""><i class="fa-brands fa-twitter fa-40x social-icon"></i></a>
    <a href=""><i class="fa-brands fa-facebook fa-40x social-icon"></i></a>
    <a href=""> <i class="fa-brands fa-instagram fa-40x social-icon"></i></a>
  </div>

  <div>
    <a class="carousel-control-prev" href="#testimonial-cards" data-bs-slide="prev">
      <span class="fa fa-solid fa-circle-chevron-left fa-1x carousel-control-prev-icon"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#testimonial-cards" data-bs-slide="next">
      <span class="fa fa-solid fa-circle-chevron-right fa-1x carousel-control-next-icon"></span>
      <span class="sr-only">next</span>
    </a>
  </div>
</body>

</html>