如何在 Shiny 和 Shiny 仪表板中将图标放在输入小部件的标题上

Question

是否可以在 Shiny and Shiny and Shiny dashboard 中将图标添加到输入小部件的标题？下面是一个例子。我想为每个输入小部件添加一个图标以指示它是数字输入（使用 bar-chart 图标）还是文本输入（使用字体图标）。现在，我使用两列。一个带有 width = 1 的图标，另一个用于输入小部件。如果能直接把图标加到标题上就好了。如果有办法实现这一点，请告诉我。

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Icon Example"
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem(
      text = "Input",
      tabName = "Input"
    )
  )
)

body <- dashboardBody(
  tabItem(
    tabName = "Input",
    fluidRow(
      column(
        width = 6,
        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = "Box 1",
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i>'))
            ),
            column(width = 11,
                   numericInput(inputId = "Num", label = "This is a numeric input", value = 1000))
          ),
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i>'))
            ),
            column(width = 11,
                   textInput(inputId = "Text", label = "This is a text input")
            )
          )
        )
      )
    )
  )
)

# User Interface
ui <- dashboardPage(
  header = header,
  sidebar = sidebar,
  body = body
)

# Server logic
server <- function(input, output, session){}

# Complete app with UI and server components
shinyApp(ui, server)

这是我的代码示例的屏幕截图。我想让输入字段的开头与图标对齐（如红色箭头所示）。换句话说，我希望图标可以成为输入小部件标题的一部分。

Answer 1

您可以通过将 icon() 包装到 span() 和 tagList() 来实现此目的。检查下面的更新代码：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Icon Example"
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem(
      text = "Input",
      tabName = "Input"
    )
  )
)

body <- dashboardBody(
  tabItem(
    tabName = "Input",
    fluidRow(
      column(
        width = 6,
        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = span(tagList(icon("bar-chart"), "Box 1")),
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i>'))
            ),
            column(width = 11,
                   numericInput(inputId = "Num", label = "This is a numeric input", value = 1000))
          )
        ),

        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = span(tagList(icon("font"), "Box 2")),
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i>'))
            ),
            column(width = 11,
                   textInput(inputId = "Text", label = "This is a text input")
            )
          )
        )
      )
    )
  )
)

# User Interface
ui <- dashboardPage(
  header = header,
  sidebar = sidebar,
  body = body
)

# Server logic
server <- function(input, output, session){}

# Complete app with UI and server components
shinyApp(ui, server)

Answer 2

编辑：

为了增加代码的可读性，我们可以使用 icon 而不是 HTML:

numericInput(inputId = "Num", label = div(icon("bar-chart", style = "color:blue;"), " This is a numeric input"), value = 1000)

初步回答：

只需使用您的 div 作为标签：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Icon Example")

sidebar <- dashboardSidebar(sidebarMenu(menuItem(text = "Input", tabName = "Input")))

body <- dashboardBody(tabItem(tabName = "Input",
                              fluidRow(column(
                                width = 6,
                                box(
                                  status = "primary",
                                  solidHeader = TRUE,
                                  width = 12,
                                  title = "Box 1",
                                  fluidRow(column(
                                    width = 11,
                                    numericInput(
                                      inputId = "Num",
                                      label = tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i> This is a numeric input')),
                                      value = 1000
                                      )
                                  )),
                                  fluidRow(column(
                                    width = 11,
                                    textInput(
                                      inputId = "Text",
                                      label = tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i> This is a text input'))
                                      )
                                  ))
                                )
                              ))))

# User Interface
ui <- dashboardPage(header = header,
                    sidebar = sidebar,
                    body = body)

# Server logic
server <- function(input, output, session) {}

# Complete app with UI and server components
shinyApp(ui, server)

结果：

如何在 Shiny 和 Shiny 仪表板中将图标放在输入小部件的标题上

How to put an icon to the title of an input widget in Shiny and Shiny dashboard

html

r

font-awesome

shiny

shinydashboard