CODEWITHSUNDEEP
rshiny
Makiyo
Makiyo

Reputation: 451

Make Shiny icon smaller in Valuebox

My shiny icon is too big for my valuebox, I know how to change it bigger by adding "fa-3x", but could someone please tell me how to change it smaller? Thanks!

 valueBox(
      value = format(movie.avg1, digits = 3),
      subtitle = NULL,  
      icon = if (movie.avg1 >= 3) icon("thumbs-up") else icon("thumbs-down"),
      color = if (movie.avg1 >= 3) "aqua" else "red"
    )

enter image description here

Upvotes: 10

Views: 9304

Answers (2)

GoGonzo
GoGonzo

Reputation: 2867

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

Upvotes: 22

Samuel
Samuel

Reputation: 3053

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

Upvotes: 3

Related Questions