使用Shiny和Shinydashboard时如何使图标大小保持一致？

Question

我正在我闪亮的应用程序中添加可点击的图标以显示弹出信息框。请参阅以下屏幕截图和代码示例。我的策略是将我的文本和 actionLink 的代码包装在 HTML 函数中。这很好用。但是，图标的大小是由关联的大小决定的。我想知道是否可以将所有图标都设置为相同大小，例如与 selectInput 关联的最小图标？

文档(https://shiny.rstudio.com/reference/shiny/1.0.1/icon.html)提到是在icon函数中设置"fa-3x"，使size变成正常的3倍。但在我的例子中，大小仍然由关联的文本决定，每个文本都有不同的大小。所以我猜这个策略是行不通的。如果有人可以分享他们的想法或建议，那就太好了。

# Load the packages
library(shiny)
library(shinydashboard)
library(shinyalert)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      )
    )
  ),
  body = dashboardBody(
    # A call to use the shinyalert package
    useShinyalert(),

    tabItems(
      tabItem(
        tabName = "tab1",
        h2(HTML("This is a title",
           as.character(actionLink(inputId = "info1", 
                                   label = "", 
                                   icon = icon("info"))))),
        fluidRow(
          box(
            title = HTML("This is the title of the box",
                         as.character(actionLink(inputId = "info2", 
                                                 label = "", 
                                                 icon = icon("info")))), 
            status = "primary", solidHeader = TRUE,
            selectInput(inputId = "Select", 
                        label = HTML("This is the title of the selectInput",
                                     as.character(actionLink(inputId = "info3", 
                                                             label = "", 
                                                             icon = icon("info")))), 
                        choices = 1:3)
          )
        )
      )
    )
  )
)

server <- function(input, output, session){
  observeEvent(input$info1, {
    shinyalert(text = "Info 1", type = "info")
  })
  observeEvent(input$info2, {
    shinyalert(text = "Info 2", type = "info")
  })
  observeEvent(input$info3, {
    shinyalert(text = "Info 3", type = "info")
  })
}

# Run the app
shinyApp(ui, server)

Answer 1

我不确定我是否正确理解了你的问题，但如果你希望它们都具有相同的大小，你可以像这样调整图标的字体大小：

# Load the packages
library(shiny)
library(shinydashboard)
library(shinyalert)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      )
    )
  ),
  body = dashboardBody(
    # A call to use the shinyalert package
    useShinyalert(),

    tabItems(
      tabItem(
        tabName = "tab1",
        h2(HTML("This is a title", "<font size='3'>",
                as.character(actionLink(inputId = "info1", 
                                        label = "", 
                                        icon = icon("info"))), "</font>")),
        fluidRow(
          box(
            title = HTML("This is the title of the box", "<font size='3'>",
                         as.character(actionLink(inputId = "info2", 
                                                 label = "", 
                                                 icon = icon("info"))), "</font>"), 
            status = "primary", solidHeader = TRUE,
            selectInput(inputId = "Select", 
                        label = HTML("This is the title of the selectInput", "<font size='3'>", as.character(actionLink(inputId = "info3", 
                                                                                                                   label = "", 
                                                                                                                   icon = icon("info"))), "</font>"
                                     ), 
                        choices = 1:3)
          )
        )
      )
    )
  )
)

server <- function(input, output, session){
  observeEvent(input$info1, {
    shinyalert(text = "Info 1", type = "info")
  })
  observeEvent(input$info2, {
    shinyalert(text = "Info 2", type = "info")
  })
  observeEvent(input$info3, {
    shinyalert(text = "Info 3", type = "info")
  })
}

# Run the app
shinyApp(ui, server)

使用Shiny和Shinydashboard时如何使图标大小保持一致？

How to make the size of icon consistent when using Shiny and Shinydashboard?

r

shiny

shinydashboard

shinyalert