CSS not applying on icons-CodePudding

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

<div >
        <a href="#"><i ></i></a>
        <a href="#"><i ></i></a>
        <a href="#"><i ></i></a>
        <a href="#"><i ></i></a>
        <a href="#"><i ></i></a>
      </div>

Here's my CSS:

.icons a {
  color: #fff;
  margin: 0 0.3rem;
}

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

CodePudding user response：

You need to apply the color to the element

.icons a i {
color: #fff;
}

CodePudding user response：

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.