Changing the colour of Font Awesome icon when adding it as a pseudo element

Question

Can I change the colour of a font awesome icon when adding it as a pseudo element?

code example:

#id::before {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding: 8px;
  vertical-align: middle;
}

adding color: red; does nothing

p.s. I'm including the stylesheet in my html and the icon IS showing up OK. I just want to change the colour.

Thanks in advance

Answer 1

Did you really set the color at the correct position (I mean: in your stylesheet)?

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";

#id::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 8px;
    vertical-align: middle;
    color: red;
}
#id {
    color: blue;
}

<div id="id">abc</div>