如何在Shiny和Shiny Dashboard中给输入控件的标题添加图标

Question

在Shiny和Shiny dashboard中，是否可以向输入部件的标题中添加图标？以下是一个例子。我想为每个输入部件添加一个图标，以指示它是数字输入（使用条形图标）还是文本输入（使用字体图标）。目前，我正在使用两列。其中一列具有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)

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

- www

Answer 1

编辑：

为了提高代码的可读性，我们可以使用 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)

---

结果:

- ismirsehregal

---

谢谢。这太棒了。 - www

Answer 2

你可以通过将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)

- FMM

---

谢谢你的回答，但这不是我要找的（尽管我会给你点赞，因为展示如何使用“span”和“tagList”很酷）。请查看我的更新截图和问题描述。我想把图标作为输入小部件标题的一部分。 - www