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

Question

是否可以在 Shiny 和 Shiny 和 Shiny 仪表板中的输入小部件的标题中添加图标？下面是一个例子。我想为每个输入小部件添加一个图标，以指示它是数字输入（使用条形图图标）还是文本输入（使用字体图标）。现在，我使用两列。一个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

只需使用您的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)

结果：

Answer 2

您可以通过包装icon()到span()and来实现这一点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)