Star Checkbutton
Here's a short shiny app along with some css that allows a font-awesome icon to behave as a checkbox. The font-weight setting in the css file determines if the icon should be solid (font-weight = 900 for TRUE) or regular (font-weight = 400 for FALSE).
checkbox.css
1.fancy-checkbox input[type="checkbox"] {
2 display: none;
3}
4
5.fancy-checkbox span:before {
6 content: "\f005";
7 font-family: "Font Awesome 5 Free";
8 font-size: 1.5em;
9 font-style: normal;
10 font-weight: 400;
11 text-decoration: inherit;
12}
13
14.fancy-checkbox input[type="checkbox"]:checked ~ span:before {
15 font-weight: 900;
16}
app.R
1library(shiny)
2
3checkboxbutton <- function(inputId, value = FALSE, color = "#000000") {
4
5 if (value) {
6 checked_str <- 'checked="checked"'
7 } else {
8 checked_str <- NULL
9 }
10 inputTag <- HTML(paste0('<input id="', inputId, '" type = "checkbox" ', checked_str, '" />'))
11 tags$div(class="checkbox",
12 tags$label(NULL, class="fancy-checkbox", style = paste0("color: ", color),
13 inputTag,
14 tags$span()
15 )
16 )
17}
18
19server <- function(input, output, session) {
20
21 output$txt1 <- renderPrint(
22 input$chk1
23 )
24
25}
26
27ui <- fluidPage(
28 tags$head(
29 tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.3.1/css/all.min.css"),
30 tags$link(rel = "stylesheet", type = "text/css", href = "checkbox.css")
31 ),
32 br(),
33 fluidRow(
34 column(1, checkboxbutton('chk1', color = "darkred")),
35 column(2, verbatimTextOutput('txt1'))
36 )
37)
38
39shinyApp(ui, server)