Shiny: Custom fonts make icons and box-navigation invisible

Hello community

I'm using a custom font from googleFonts. However, the icons I'm using disappear when I do so as well as the collapse signs in boxes and the navigation bar.
How can I make them visible again?

Here is an example:

packages <- c( "data.table","ggthemes","ggExtra","grid","gridExtra","extrafont","stringi","plyr","dplyr","reshape2","shiny","shinydashboard","shinythemes","shinyjs","shinyFeedback","stats","plotly","ggplot2","lattice","cowplot","lubridate","rstudioapi","zoo")
for (i in packages){
  if (!is.element(i,installed.packages()[,1])) {
    install.packages(i,dependencies = TRUE)
  }
}
lapply(packages, require, character.only = TRUE)



server <- function(input,output,session) {}

header<-dashboardHeader(title = "Font_Icon_test",titleWidth = 280)
sidebar<-dashboardSidebar(width = 280,sidebarMenu(id="sidebar_tabs",
                                                  menuItem("AAA", tabName = "AAA",icon = icon("fire",lib = "glyphicon")),
                                                  menuItem("BBB", tabName = "BBB",icon = icon("refresh",lib = "glyphicon"))
))


body<-dashboardBody(title="Main",
                    tags$style(HTML("@import url('//fonts.googleapis.com/css?family=Oswald');")), #
                    tags$style(HTML("* {font-family: Oswald !important;}")), #exclude this line to toggle with/without custom font
                    tabItem(tabName = "ABC",h1("ABC"),
                            fluidPage(
                              box(title="Collapsible box 1",collapsible=TRUE,sliderInput(inputId = "testinput1",label="testinput1",min=1,max=12,value=1)),
                              box(title="Collapsible box 2",collapsible=TRUE,collapsed=TRUE,sliderInput(inputId = "testinput2",label="testinput2",min=1,max=12,value=12))
                            )                  
                    )
)

ui <- dashboardPage(skin = "black",
                    header,
                    sidebar,
                    body
)

shinyApp(ui = ui, server = server)

@Zappageck

The font-family: Oswald !important line was overwriting the possibility of using the icon font. Updating the line to "everything except .glyphs class" should resolve this.

tags$style(HTML("*:not(.glyphicon) {font-family: Oswald !important;}")), #exclude this line to toggle with/without custom font

18%20AM

2 Likes

@barret
Thank you very much for your answer! It does indeed solve the issue with the glyphicons.

However, the collapse signs in the corner of boxes or the hamburger menu, which collapses the sidebar are not visible anymore at all. (Not even a replacement/error symbol)

Also, I have also some icons from the default library. How can I exclude these in a similiar way? Where can I look this up? (icon = icon("dashboard"))
edit:
-> solved with: tags$style(HTML("*:not(.glyphicon):not(.fa) {font-family: Oswald !important;}")) - Thank you

1 Like

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