如何修改shinyFeedback::feedbackWarning的字体大小与图标占位空间？

API 探路者

2026-6-26

解决方案

当然可以通过自定义CSS解决这两个问题，具体调整如下：

1. 移除图标占位空间

当设置icon=NULL时，shinyFeedback仍会渲染一个空的图标容器，我们可以通过CSS隐藏这个容器以消除占位：

/* 隐藏警告反馈的空图标容器 */
.shiny-feedback-container .feedback-warning .fa-icon-container {
  display: none;
}

2. 缩小警告消息字体

直接针对反馈文本的类设置字体大小：

/* 缩小警告提示文本的字体 */
.shiny-feedback-container .feedback-warning .feedback-text {
  font-size: 0.8em; /* 可根据需求调整数值 */
}

修改后的完整代码

将上述CSS通过tags$head(tags$style())嵌入到UI中即可：

library(shiny)
library(shinyFeedback)

ui<-shinyUI(fluidPage(
  shinyFeedback::useShinyFeedback(),
  # 自定义CSS样式
  tags$head(tags$style(HTML("
    /* 隐藏警告反馈的空图标容器 */
    .shiny-feedback-container .feedback-warning .fa-icon-container {
      display: none;
    }
    /* 缩小警告提示文本的字体 */
    .shiny-feedback-container .feedback-warning .feedback-text {
      font-size: 0.8em;
    }
  "))),
  textInput("time", "Timestamp", 
            value = '2024/04/01 00:00:00', 
            width = '160px', placeholder = NULL)
))

server<- function(input, output, session) {
  
  observe(shinyFeedback::feedbackWarning("time", 
                                         !(grepl('[0-9]{4}/[0-9]{2}/[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}', input$time)),
                                         "Please use a valid timeformat", 
                                         icon=NULL))
}

shinyApp(ui,server)