Font Awesome upgrade from 4 to 5

shiny
1

Hi there,

I've noticed that the icons returned from using fa-<icon-name-here> are actually the Font Awesome 4 icons, rather than the Font Awesome 5 icons. Is this in the roadmap for Shiny to update this dependency?

Does anyone have a suggestion on how I could use FA 5 icons in Shiny? I'm pants when it comes to web stuff.

Thanks!

1 Like
2

It is definitely on our roadmap, but not for the upcoming Shiny 1.1 release (which will be submitted to CRAN in the next month or so). You can see our github issue for this upgrade request here: https://github.com/rstudio/shiny/issues/1966. Currently, we're thinking of addressing this (or least have a more satisfying answer) for Shiny 1.2

2 Likes
3

Good to hear :smiley: Thanks for the quick reply!

I didn't realise there was a link to the old Font Awesome for use!

1 Like
4

You can manually implement the icons, however because shiny often escapes content you are not completely free in where to put icons unless you push them later via javascript or create custom HTML element constructors in R.
Also note for testing always run app in browser. RStudio browser is not fully compatible with all features.

Example:

library(shiny)

ui <- fluidPage(
    tags$head(
      HTML('<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>')
    )
    ,column(width = 2L,selectizeInput(inputId = 'demoinput',label = HTML('Select your favorite <i class="fas fa-mobile-alt"></i> os/brand'),selected = NULL,multiple= TRUE
                                          ,choices = NULL))
    ,column(width = 6L,DT::datatable(data = cbind(iris[1:10,],"icon"="<i class=\"fas fa-leaf\"></i>"),escape = FALSE))
)

server <- function(input, output, session) {
  updateSelectizeInput(session = session,inputId = 'demoinput',choices = c('apple','android','blackberry'),selected = NULL,
                       options = list(render=I("{option: function(item, escape) {return '<div><span class = \"fab fa-'+item.value.toLowerCase()+'\"></span></div>'}}"))
  )
  
}

runApp(launch.browser = TRUE , shinyApp(ui, server))
1 Like
5

Thanks for this, I'll give it a go in the next day or two!