Shiny bs4Dash侧边栏折叠后菜单图标不显示的解决方法

默认情况下，bs4Dash的侧边栏折叠成迷你模式时，只会保留内置Font Awesome图标，自定义的图片图标会被隐藏。要解决这个问题，只需要添加一段自定义CSS，强制让迷你侧边栏状态下的图片图标显示出来。

完整代码示例 #

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  dashboardHeader(title = "自定义图标测试"),
  dashboardSidebar(
    sidebarMenu(
      id = "sidebar_menu",
      menuItem(
        text = "首页",
        tabName = "home",
        icon = tags$img(src = "https://via.placeholder.com/20", alt = "首页图标")
      ),
      menuItem(
        text = "数据",
        tabName = "data",
        icon = tags$img(src = "https://via.placeholder.com/20", alt = "数据图标")
      ),
      menuItem(
        text = "设置",
        tabName = "settings",
        icon = tags$img(src = "https://via.placeholder.com/20", alt = "设置图标")
      )
    ),
    # 自定义CSS强制显示折叠状态下的图片图标
    tags$style(HTML("
      /* 迷你侧边栏状态下显示自定义图片图标 */
      .sidebar-mini .main-sidebar .nav-sidebar .nav-link img {
        display: inline-block !important;
        margin-right: 0; /* 折叠后移除图标右侧间距 */
        width: 20px; /* 可根据需求调整图标尺寸 */
        height: 20px;
      }
      /* 确保迷你状态下菜单文字隐藏（默认已生效，此处做兼容） */
      .sidebar-mini .main-sidebar .nav-sidebar .nav-link span {
        display: none;
      }
    "))
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "home", p("首页内容")),
      tabItem(tabName = "data", p("数据页面内容")),
      tabItem(tabName = "settings", p("设置页面内容"))
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

关键说明 #

• 核心CSS规则是针对.sidebar-mini类下的图片元素，通过!important强制覆盖默认的隐藏样式，保证折叠时图标正常显示。
• 可以根据自身图标尺寸调整width和height参数，让图标在迷你侧边栏中显示更协调。
• 如果使用本地图标文件，只需将src路径改为本地资源路径（比如www/icon-home.png）即可。

效果展示 #

• 侧边栏展开状态：同时显示自定义图片图标和菜单文字，与常规布局一致。
• 侧边栏折叠状态：菜单文字自动隐藏，仅保留自定义图片图标，和内置Font Awesome图标表现完全一致。

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