0

I am trying to change the font family of my entire shiny app. I found this solution

* { font-family: Arial, sans-serif !important; }

from this url

This is changing every font but also removing my icons.

dashboardSidebar(sidebarMenu(
                        menuItem("Data", tabName = "dataimport", icon = icon("folder-open"))))

enter image description here

This is how it looks now. It's not working without !important as mentioned in the solution above. What can I do to fix this?

Vishnupriya
  • 49
  • 6

1 Answers1

0

Can you share the HTML code of the icon? It probably is a span or i tag.

Instead of adding the font-family to every single html element with *, you can add it to the body tag (see the approved answer in your link). Please don't use !important when adding the font-family when it isn't absolutely needed (information about !important in css: What are the implications of using "!important" in CSS?). If the icon still gets overwritten by you font, you can select the span or i tag in the css and set the font-family to the default font-family with icons.

CSS:

body {
  font-family: Arial;
}
Jasmin
  • 51
  • 1
  • 3
  • Html code for icon. I have tried body{ font-family: Arial; } and *{ font-family: Arial;}. I have some shiny dashboard boxes and I was hoping to change all their titles too with this. – Vishnupriya Apr 20 '22 at 09:30
  • So what happened when you changed the css, what font-family is the title? Can you please create a code snippet with the html code and css? Because then I could check what code overwrites the title in devtools, and find the selector specificity, so you don't have to use !important. See this for selector specificity in CSS: [link css specificity explained](https://www.freecodecamp.org/news/what-is-css-specificity/) – Jasmin Apr 20 '22 at 12:09