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){}
)
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){}
)