CODEWITHSUNDEEP
htmlcss
Danielle
Danielle

Reputation: 13

CSS: Social Icons show a different text color than the one I have set

I have created social icons using w3schools and when pasting the code into my sidebar widget the text within the icons shows black instead of white.

This is my code:

.fa {
  padding: 15px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 3px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #E1306C;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>

Thanks for your help!

Upvotes: 0

Views: 57

Answers (2)

dominikjosch
dominikjosch

Reputation: 117

I've tested your code and it seems to work correctly outside the side-bar.

So the problem might be the side-bar-widget. Do you wrote the widget yourself? If not, maybe there is a default-style for a-tags in your sidebar that over-writes your color. You could change that, if possible.

Another way would be to increase the specificity of your css, for example by using:

a.fa-facebook {
  background: #3B5998;
  color: white;
}

If nothing helps, you could try adding an important-statement to your color:

.fa-facebook {
  background: #3B5998;
  color: white !important;
}

But use !important with care, it is not considered best-pracitce.

Upvotes: 0

Rafee Shaik
Rafee Shaik

Reputation: 679

You've used hover. Remove this to get same color which you've given in CSS.

.fa:hover {
    opacity: 0.7;
}

Upvotes: 1

Related Questions