如何修改Font Awesome图标颜色？React导航栏开发求助

你的问题出在CSS里对移动端图标颜色的设置上，直接修改对应样式就能解决：

步骤1：修改图标颜色样式 #

找到你CSS里的#mobile i规则，把color: #ffff换成和导航栏背景对比强烈的颜色，比如和网站logo一致的深蓝色#1D3053，或者交互态的浅蓝色#319afc：

#mobile i {
     color: #1D3053; /* 替换原来的#ffff */
     align-items: center;
}

如果需要给图标加hover效果，还可以补充：

#mobile i:hover {
     color: #319afc;
}

步骤2：修复React组件里的className错误 #

你的Navbar组件中，ul的className写法有误：

className={this.state.clicked ? "#navbar active" : "#navbar"}

这里不需要在className里写#navbar（这是选择器语法，不是类名），应该改成：

className={this.state.clicked ? "active" : ""}

因为ul已经有id="navbar"了，className只需要控制active类的切换即可。

修改后的完整CSS（移动端图标部分） #

#mobile {
     display: none;
}

#mobile i {
     color: #1D3053; /* 修改后的颜色 */
     align-items: center;
     font-size: 24px;
     cursor: pointer;
}

#mobile i:hover {
     color: #319afc; /* 可选：hover时的颜色 */
}

@media screen and (max-width: 769px) {
     /* ... 其他原有样式 ... */
     #mobile {
          display: block;
     }
}

这样修改后，fa-bars和fa-times图标就会显示为深蓝色，和浅灰色的导航栏背景形成清晰对比，解决看不清的问题。

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