CODEWITHSUNDEEP
htmlcsssass
Nico Asseo
Nico Asseo

Reputation: 65

CSS not applying on icons

I'm watching Traversy Media's SASS Course, and I've got this problem with my icon colour not applying. Here's my HTML:

Does anyone know why the #fff colour isn't applying to my icons?

.icons a {
  color: pink;
  margin: 0 0.3rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="icons my-1">
  <a href="#"><i class="fas fa-globe fa-2x"></i></a>
  <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
  <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
  <a href="#"><i class="fab fa-linkedin fa-2x"></i></a>
  <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
</div>

Upvotes: 1

Views: 732

Answers (3)

Nico Asseo
Nico Asseo

Reputation: 65

I don't know why, but nothing was working out, anyways thanks for your help, I just copy pasted the source code from Traversy Media's YouTube Video which is extremely frustrating but can't be helped! Thanks!!

Upvotes: 0

Ryan Garvey
Ryan Garvey

Reputation: 66

You're applying the color to the surround <a> tag, to apply the effect to the inner <i> field you need the following CSS selector:

.icons a i {
   color: #fff
}

Otherwise the selector is trying to change the color of the anchor itself, which has no color.

Upvotes: 1

yerme
yerme

Reputation: 855

You need to apply the color to the element

.icons a i {
color: #fff;
}

Upvotes: 0

Related Questions