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

[rxtheodoro]

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:

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

[rxtheodoro]

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?

[scottyd22]

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"
  )
  
)

[rxtheodoro]

Nice! Easier than i thought.

Thanks a lot!