Using valueBox, how can I add a text in front of an icon?

Hi, guys!

I'm trying to add a text in front of an icon with valueBox.

What I did:


shinydashboard::valueBox(
          value = telegram_msg,
          subtitle = "Nº words",
          color = "yellow",
          icon = icon("car"),
          width = "3 col-lg-2"
       )

What I have:
Captura de tela de 2023-01-17 11-46-31

I need to write "Cars" in front of the icon. How can I do it?

Never mind, just found:

shinydashboard::valueBox(
          value = telegram_msg,
          subtitle = "Nº words",
          color = "yellow",
          icon = tags$i(class = "fa-solid fa-car", "  Cars" ),
          width = "3 col-lg-2"
       )

But can I change only the font size? And the font type?

Below is one way to write "Cars" in front of the car icon. This is accomplished by nesting the tags$i icon inside of another tags$i, which starts with HTML for the word "Cars". A new class (myclass) is assigned to this HTML, and the formatting is controlled via CSS within <style> tags at the beginning of the UI.

ui <- fluidPage(
  HTML('<style>
       .myclass {
        color: white;
        background-color: navy;
        font-family: Serif;
        font-size: 40px;
        margin-right: 10px;
        padding: 5px; 
       }
       </style>'),
  
  shinydashboard::valueBox(
    value = telegram_msg,
    subtitle = "Nº words",
    color = 'red',
    icon = tags$i(HTML('<font class="myclass">Cars </font>'),
                    tags$i(class = "fa-solid fa-car")
                    ),
    width = "3 col-lg-2"
  )
  
)

image

1 Like

Nice! Easier than i thought.

Thanks a lot!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.