如何在Shiny模态框中心添加大尺寸主题关联的警示图标

核心思路 #

• 利用bslib的Bootstrap工具类和主题系统控制图标样式
• 通过HTML标签包裹图标，实现居中、放大效果
• 关联主题色实现动态颜色适配

方案1：使用Bootstrap内置警示色+工具类 #

直接用Bootstrap的文本颜色类和字体大小类，配合居中类快速实现需求：

library(shiny)
library(bslib)

ui = basicPage(
  theme = bs_theme(version = 5), # 启用bslib Bootstrap 5主题
  actionButton("show", "Show modal dialog")
)

server = function(input, output) {
  observeEvent(input$show, {
    showModal(modalDialog(
      title = HTML('<div class="text-center">', icon("bomb", class = "fs-1 text-danger"), '</div>'),
      "This is an important message!",
      easyClose = TRUE
    ))
  })
}

shinyApp(ui, server)

代码说明 #

• fs-1：将图标放大到Bootstrap最大字体尺寸，可替换为fs-2/fs-3调整大小
• text-danger：设置图标为红色警示色，替换为text-warning可改为橙色
• <div class="text-center">：让图标在标题栏居中显示
• bs_theme(version = 5)：确保Bootstrap工具类生效

方案2：自定义主题变量，实现颜色动态关联 #

如果需要让图标颜色和bslib主题的自定义变量绑定，可通过主题变量+自定义CSS实现：

library(shiny)
library(bslib)

ui = basicPage(
  theme = bs_theme(version = 5) %>%
    bs_add_variables(
      "alert-icon-color" = "#ff6b35" # 自定义橙色警示色，可随时修改此值
    ) %>%
    bs_add_rules(
      ".alert-icon {
        font-size: 3rem;
        color: var(--alert-icon-color);
        display: block;
        margin: 0 auto;
      }"
    ),
  actionButton("show", "Show modal dialog")
)

server = function(input, output) {
  observeEvent(input$show, {
    showModal(modalDialog(
      title = icon("bomb", class = "alert-icon"),
      "This is an important message!",
      easyClose = TRUE
    ))
  })
}

shinyApp(ui, server)

代码说明 #

• bs_add_variables：定义全局主题变量--alert-icon-color，后续修改主题风格只需调整此变量
• bs_add_rules：添加自定义CSS规则，设置图标大小、颜色和居中逻辑
• alert-icon：自定义样式类，将图标与主题变量关联

额外优化 #

• 若要强化模态框警示效果，可给modalDialog添加class="modal-danger"，让模态框边框和标题栏同步显示警示色
• 图标大小可通过font-size的具体数值（如2rem/4rem）精确调整

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