CSS 不适用于图标答案

【问题标题】：CSS not applying on iconsCSS 不适用于图标
【发布时间】：2022-01-29 21:29:42
【问题描述】：

我正在观看 Traversy Media 的 SASS 课程，但我遇到了图标颜色不适用的问题。这是我的 HTML：

有人知道为什么#fff 颜色不适用于我的图标吗？

.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>

【问题讨论】：

.icons a i{color#fff}试试
它正在工作。至少它在上面的演示中工作。您必须有其他 CSS 覆盖。
我知道什么可能是 Bootstrap 类。你在使用样式库吗？
Nico，如果图标的颜色不正确，您的开发工具如何说明它们的颜色来自什么样式。 开发工具 -> 元素 -> 计算 -> 点击颜色
如果你应用#fff，那么图标将不可见吗？

标签： html css sass

【解决方案1】：

您将颜色应用到环绕 <a> 标记，要将效果应用到内部 <i> 字段，您需要以下 CSS 选择器：

.icons a i {
   color: #fff
}

否则选择器会尝试改变锚点本身的颜色，它没有颜色。

【讨论】：

这通常不是必需的。 i 元素继承自锚点。

【解决方案2】：

你需要给元素应用颜色

.icons a i {
color: #fff;
}

【讨论】：

这通常不是必需的。问题中的代码并非如此。

【解决方案3】：

试试这个：

.icons.my-1 a {
  color: white;
}

<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>

【讨论】：

【解决方案4】：

我不知道为什么，但没有任何结果，无论如何感谢您的帮助，我只是从 Traversy Media 的 YouTube 视频中复制粘贴了源代码，这非常令人沮丧但无能为力！谢谢！！

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。