Inline icon in the label of an input field at the sidebar panel in Shinydashboard

Question

I have a follow-up question of my previous question (How to make the size of icon consistent when using Shiny and Shinydashboard?).

Now I want to add a radio button in the sidebar panel and also add an icon at the end of the label. This icon will be an action link to a pop-up box.

I can add icon and change the icon size successfully as my previous post except that the icon is not in the same line as the label of the radio button. Is it possible to make them in the same line?

Code:

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

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      ),
      radioButtons(inputId = "radio", choices = c("Yes", "No"),
                   label = HTML("A Radio Button", "<font size='3'>",
                   as.character(actionLink(inputId = "info4", 
                                           label = "", 
                                           icon = icon("info"))), "</font>"))
    )
  ),
  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")
  })
  observeEvent(input$info4, {
    shinyalert(text = "Info 4", type = "info")
  })
}

# Run the app
shinyApp(ui, server)

Answer 1

You can do this by adding display: inline style to the actionLink id. This will override display: block.

So just after sidebar = dashboardSidebar( and before sidebarMenu( add this line:

tags$head(
  tags$style(
    HTML("#info4 {
         display: inline;
         margin: 0px;
         }")
  )
),