HTML中嵌入的Font Awesome汉堡菜单图标无法改色求助

问题说明 #

做响应式导航栏时，屏幕宽度≤600px时菜单切换为汉堡样式，Font Awesome的汉堡图标功能正常，但始终显示黑色，和黑色导航栏背景冲突导致无法看见。将图标移出导航栏单独设置时能正常改色，但在导航栏内用内联样式或给父级<a>设置颜色都无效。

解决方案 #

核心问题是没有直接选中图标元素设置颜色，Font Awesome图标默认样式会覆盖父级<a>的颜色继承，需要明确选中图标元素进行样式设置：

修改CSS代码 #

在屏幕≤600px的媒体查询中，添加对图标元素的颜色设置：

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }

  .navbar a.icon {
    float: right;
    display: block;
    border: solid white 1px;
  }
  /* 新增：直接选中图标设置白色 */
  .navbar a.icon i {
    color: white;
  }
}

为什么之前的方法无效？ #

• 父级<a>标签的color属性无法完全传递给Font Awesome图标，因为图标是特殊的字体元素，默认带有自身的颜色样式
• 内联样式失效是因为Font Awesome的默认CSS优先级更高，且内联样式如果没直接加在图标元素上，无法覆盖默认样式

可选优化：调整图标大小 #

如果觉得fa-8x的图标过大，也可以在这里统一调整：

.navbar a.icon i {
  color: white;
  font-size: 1.5rem; /* 替换fa-8x，适配导航栏尺寸 */
}

修改后完整CSS（关键修改已标注） #

.navbar {
  margin: 30px;
  padding-left: 20px;
  overflow: hidden;
  background-color: #333;
  border-radius: 25px;
}

a {
  float: left;
  display: block;
  font-family: 'Anybody';
  font-size: 1.5rem;
  font-weight: 100;
  color: beige;
  text-align: center;
  padding: 8px 20px;
  margin: 5px 20px 5px 30px;
  text-decoration: none;
}

a:hover {
  background-color: #111;
}

a.active {
  background-color: rgb(82, 90, 90);
  color: white;
}

.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }

  .navbar a.icon {
    float: right;
    display: block;
    border: solid white 1px;
  }
  /* 新增图标颜色设置 */
  .navbar a.icon i {
    color: white;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {
    position: relative;
  }

  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  /* 确保展开后图标仍保持白色 */
  .navbar.responsive a.icon i {
    color: white;
  }
}

内容的提问来源于stack exchange，提问作者Steven L