如何修改shinydashboard中dashboardControlBar的齿轮颜色与图标？

dashboardControlBar的齿轮图标使用Font Awesome的fa-cog类（部分版本也可能是fa-gear，优先用fa-cog），你可以通过自定义CSS修改它的颜色、大小等样式，思路和你修改图钉图标一致，只需替换对应的CSS类即可。

1. 修改齿轮图标颜色 #

直接针对fa-cog类设置颜色，添加!important确保覆盖默认样式：

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tags$head(tags$style(type = "text/css", "
        /* 将齿轮图标颜色改为蓝色 */
        .fa-cog {
          color: #007bff !important;
        }
      "))
    ),
    controlbar = dashboardControlbar(
      id = "controlbar",
      collapsed = TRUE, # 仅折叠状态下显示齿轮图标
      overlay = TRUE, 
      skin = "light"
    )
  ),
  server = function(input, output, session) {
  }
)

2. 修改齿轮图标样式（大小、hover效果等） #

除颜色外，还可调整图标尺寸、鼠标悬停动画等：

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tags$head(tags$style(type = "text/css", "
        /* 调整齿轮大小并设置默认颜色 */
        .fa-cog {
          font-size: 18px !important;
          color: #dc3545 !important;
        }
        /* 鼠标悬停时的样式变化 */
        .fa-cog:hover {
          color: #c82333 !important;
          transform: rotate(15deg);
          transition: transform 0.3s ease;
        }
      "))
    ),
    controlbar = dashboardControlbar(
      id = "controlbar",
      collapsed = TRUE,
      overlay = TRUE, 
      skin = "light"
    )
  ),
  server = function(input, output, session) {
  }
)

注意事项 #

• 只有当controlbar设置为collapsed = TRUE时，齿轮图标才会显示（展开状态下不显示齿轮）。
• 如果你的shinydashboard版本中齿轮图标用的是fa-gear类，只需把CSS选择器替换为.fa-gear即可。

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