如何在 R Shiny 中更改框折叠/展开按钮的颜色？

Question

I cannot figure out how to change the color of the +/- button of the collapsible box. I want to change the white button to black. Below is the sample code:

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  fluidRow(
    box(status = "info", solidHeader = TRUE, title = "Background - Hypothetical Life", width = "auto", collapsible = TRUE, collapsed = TRUE,
            h5("sample text"))))

ui <- dashboardPage(
  dashboardHeader(title = "Box"),
  dashboardSidebar(),
  body
)

server = function(input, output, session) { }
shinyApp(ui = ui, server = server)

Many thanks!

Answer 1

Here's how you can do it, with CSS:

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  tags$style(
    type = 'text/css',
    '.fa, .fas {
      font-weight: 900;
      color: black;
    }'
  ),
  fluidRow(
    box(status = "info", solidHeader = TRUE, 
        title = "Background - Hypothetical Life", 
        width = "auto", collapsible = TRUE, collapsed = TRUE,
        h5("sample text"))))

ui <- dashboardPage(
  dashboardHeader(title = "Box"),
  dashboardSidebar(),
  body
)

server = function(input, output, session) { }
shinyApp(ui = ui, server = server)

As said in this answer , when you want to change something in the CSS style but don't really know CSS (like me), launch your app in browser, do "Inspect element" (right click or Ctrl+Shift+C for me) and check the "Inspector". It will show you the CSS description of each element.

Then, you put this CSS code in tags$style like in the example above and you add some arguments to customize it. There are many resources online on CSS.

For example, in the example above, I saw in the "Inspector" that the icon CSS style was:

.fa, .fas {
   font-weight: 900;
}

So I just put it in a tags$style and then searched what was the argument I needed to modify the color of the icon. This answer to another post gave me solution: you need to add color .

Hope this helps