Disabling color on font awesome icon

1
votes

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

enter image description here

Is there a way to remove this link color?

<a href="https://www.w3schools.com"><i class="fa fa-facebook"></i></a>
3
htmlcssfont-awesome
Seems like you know CSS is involved, so what have you tried? – j08691
Yes, I tried to remove the decoration before, because I didn't know you can't do that with font awesome. – rwd

3 Answers

1
votes

In your CSS:

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

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.

1
votes

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>