Font awesome 6 icons not showing when using ids

Question

I'm trying to show an icon on my website but it only works when I remove the id from de a tag.

This is the code:

#link_facebook {
  color: #3b5998;
}

<a class="nav-link" id="link_facebook" href="#" role="button" target="_blank">
  <i class="fa-brands fa-facebook"></i>
</a>

Answer 1

Put the color on the i element.

i {
    color: #3b5998;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<a class="nav-link" id="link_facebook" href="#" role="button" target="_blank">
   <i class="fa-brands fa-facebook"></i>
</a>

Answer 2

You need to understand about specificity in CSS. You can take a look the document here https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

About your style, It can may no apply when the tag i or fa-brands or fa-facebook has color style. So for your case you can do like this:

#link_facebook i {
  color: #3b5998;
}