Disabling color on font awesome icon

Question

I just added a href tag to my font awesome icon, which alters its color like so:

Is there a way to remove this link color?

<a href="https://www.w3schools.com"><i class="fa fa-facebook"></i></a>

Answer 1

You can change the color for all .fa icons inside anchor tags

a .fa {
    color: black;
}

Demo in Stack Snippets

a .fa {
  color: black;
}

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

<a href="https://www.w3schools.com"><i class="fa fa-facebook"></i></a>

Answer 2

You can't "remove" the color, but you can change the color to something else.

Simply use CSS with a class

a.black{color: #000 !important}

Or on all atags

a{color: #000 !important}

Or directly on the tag

<a href="https://www.w3schools.com" style="color: #000 !important"><i class="fa fa-facebook"></i></a>

I'm adding the important tag, to ensure it stays black when being clicked or active.

Answer 3

In your CSS:

.fa-facebook {
    color: black; /* or any other color */
}