Make Shiny icon smaller in Valuebox

Try setting subtitle = HTML(" ") instead of NULL. This will enter the invisible HTML character non-breaking space which will add the vertical space you need.


1. Changing the size of all icons

Shiny icon() uses font-awesome in this case. According to this answer, decreasing size of icon can be done specifying font-size in css. To implement this in shiny just add this line in UI Body tags$head( tags$style(HTML(".fa{font-size: 12px;}")))

library("shiny")
library("shinydashboard")

# header
header <- dashboardHeader(
  title = "Changing the font size of valueBoxes", 
  titleWidth = 450
)

# sidebar
sidebar <- dashboardSidebar(disable = TRUE)

# body
body <- dashboardBody(
  tags$head( 
    tags$style(HTML(".fa{font-size: 12px;}"))
  ),
  valueBox(
    value = "3.94",
    subtitle = NULL,  
    icon = icon("thumbs-up")
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body), 
  server = function(input, output){}
)

enter image description here

2. Changing the size of a single element

If one wants to change size of one element instead of all elements with the same class (.fa in this case), use tags$i(class = "fas fa-thumbs-down", style="font-size: 12px") instead of icon(). Where appropriate class can be found in font awesome docs.

library("shiny")
library("shinydashboard")

header <- dashboardHeader(
  title = "Changing the font size of valueBoxes", 
  titleWidth = 450
)
sidebar <- dashboardSidebar(disable = TRUE)
body <- dashboardBody(
  valueBox(
    value = "3.94",
    subtitle = NULL,  
    icon = tags$i(class = "fas fa-thumbs-down", style="font-size: 12px")
  ),
  valueBox(
    value = "5.00",
    subtitle = NULL,  
    icon = tags$i(class = "fas fa-thumbs-up", style="font-size: 24px; color: white")
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body), 
  server = function(input, output){}
)

enter image description here

Tags:

R

Shiny