rshinyshinydashboardshinyalert

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

I am adding clickable icons in my shiny app to show a popup information box. Please see the following screenshot and code example. My strategy is to wrap my text and the code for actionLink in the HTML function. This works well. However, the size of the icon is determined by the size of the associated. I would like to know if it is possible to make all the icons the same size, such as the smallest one associated with the selectInput?

The documentation (https://shiny.rstudio.com/reference/shiny/1.0.1/icon.html) mentioned that it is to set "fa-3x" in the icon function to make the size to be 3 times as normal. But in my case the size would sill be determined by the associated text and each text has a different size. So I guess this strategy would not work. It would be great if anyone can share their ideas or suggestions.

enter image description here

# 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)
Solution

  • I'm not sure if I understand your question correctly but if you want the them all to have the same size you can adapt the font size for the icons like this:

    # 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)