How to make icons and text bigger in bslib::value_box?

Question

I would like to at least double the size of the icons and text in the following bslib::value_box()s:

here is my code so far

library(shiny)
library(bslib)


ui = page_fluid(

  titlePanel("Test App"),

  fluidRow(
      selectInput("species_richness",
                  "Select number of species",
                  choices = c(1:5)),
      selectInput("mean_c",
                  "Select mean C",
                  choices = c(1:5)),
      selectInput("fqi",
                  "Select FQI",
                  choices = c(1:5))
    ),

      #boxes with key values
      layout_column_wrap(
        width = 1/3,
        bslib::value_box(
          title = "Species Richness",
          value = htmlOutput("species_richness"),
          showcase = icon("seedling")
        ),
        bslib::value_box(
          title = "Mean C",
          value = htmlOutput("mean_c"),
          showcase = icon("pagelines")
        ),
        bslib::value_box(
          title = "Total FQI",
          value = htmlOutput("fqi"),
          showcase = icon("spa")
        )
      )
)

server = function(session, input, output) {

  output$species_richness <- renderUI({
    input$species_richness
  })
  output$mean_c <- renderUI({
    input$mean_c
  })
  output$fqi <- renderUI({
    input$fqi
  })

}

shinyApp(ui, server)

How can I make the icons and text 2-3x bigger? In my real code, the values are calculated server-side so the solution has to work with htmlOutput(). I am open to CSS or bslib solutions.

score 0 · Accepted Answer · answered Jun 06 '23 at 19:10

To increase the size of icon, you can either change the font-size or update class according to this https://shiny.posit.co/r/reference/shiny/0.14/icon.html.

icon('seedling', class = 'fa-3x'),

For the text size, while rendering, you can control the size of text via font-size. You can use: shiny::p(input$species_richness, style = 'font-size: 40px;')

Full example:

library(shiny)
library(bslib)


ui = page_fluid(

    titlePanel("Test App"),
    fluidRow(
        selectInput("species_richness",
                    "Select number of species",
                    choices = c(1:5)),
        selectInput("mean_c",
                    "Select mean C",
                    choices = c(1:5)),
        selectInput("fqi",
                    "Select FQI",
                    choices = c(1:5))
    ),

    #boxes with key values
    layout_column_wrap(
        width = 1/3,
        bslib::value_box(
            title = "Species Richness",
            value = htmlOutput("species_richness"),
            showcase = icon("seedling", class = 'fa-3x')
        ),
        bslib::value_box(
            title = "Mean C",
            value = htmlOutput("mean_c"),
            showcase = icon("pagelines", class = 'fa-3x')
        ),
        bslib::value_box(
            title = "Total FQI",
            value = htmlOutput("fqi"),
            showcase = icon("spa", class = 'fa-3x')
        )
    )
)

server = function(session, input, output) {

    output$species_richness <- renderUI({
        shiny::p(input$species_richness,
                 style = "font-size: 40px;")
    })
    output$mean_c <- renderUI({
        shiny::p(input$mean_c,
                 style = "font-size: 40px;")
    })
    output$fqi <- renderUI({
        shiny::p(input$fqi,
                 style = "font-size: 40px;")
    })

}

shinyApp(ui, server)

How to make icons and text bigger in bslib::value_box?

1 Answers1