Shinydashboard Some Font Awesome Icons Not Working

shinydashboard some Font Awesome Icons Not Working

Ok, I think the new ones in version 4.4 are not updated. You can probably request shiny team to update them and they will do it very easily. Alternatively you can do it yourself by downloading them and replacing the previous content...

1. Go to the Font Awesome download page and get it

2. Locate your font awesome folder where you installed shiny package. This should be somewhere like here ~\Documents\R\win-library\3.1\shiny\www\shared\font-awesome

3. Replace the content of this folder with new contents (you can delete the previous content if you want). Below is what I put in there

4. Now your app should work fine with new fonts

This Font Awesome icon ('gears') does not exist in R shiny

The solution for this problem is just to downgrade the new version of ShinydashboardPlus from 2.0.3 to 0.7.5.

Here is the code :

require (devtools) 
install_version("shinydashboardPlus", version="0.7.5",repos = "http://cran.us.r-project.org")

Warning using ShinyManager: Font Awesome icon ('close') does not exist

These warnings were solved in new versions of shinyManager. Thanks to @ismirsehregal.

See the 3 commits.

Using Font Awesome 5.7 icons in Shiny apps

Adding the following line to your ui.r file will expand Shiny support for Font Awesome 5.7.2 icons:

tags$style("@import url(https://use.fontawesome.com/releases/v5.7.2/css/all.css);"),

Afterwards, you can use the function icon("icon-name") in your Shiny web app. For example, you can use icon("vote-yea") to check if these new Font Awesome icons are working as intended.

R Shiny: how to use fontawesome pro version with the icon function?

The simplest and most reliable way to do this is to:

1. Put the font-awesome files in a subdirectory of the app, www/fontawesome/

2. Add the following somewhere to the UI code:

    htmlDependency(
      name = "font-awesome", version = "99.0",
      src = "./www/fontawesome",
      stylesheet = "css/all.min.css"
    )
   

Here's an example app that illustrates:

shinyApp(
  ui = fluidPage(
    "This is a Font-Awesome Pro-only icon: ", icon("acorn"),
    htmlDependency(
      name = "font-awesome", version = "99.0",
      src = "./www/fontawesome", stylesheet = "css/all.min.css"
    )
  ),
  function(input, output, session) { }
)

One potential issue with the other method is that if the ui component contains a call to icon(), and then there is some dynamically-rendered UI (via renderUI() and uiOutput()) which contains a call to my_icon() that uses an icon that's only in Font-Awesome Pro, then that Pro icon will not show up. The method I showed here will not have that problem.

Here's why the other method will have that problem: When the static ui for an application is rendered to HTML, it looks for htmlDependency objects in the ui, and the newest version of an htmlDependency for a given name (in this case "font-awesome") "wins". So if there's just a call to icon() in the code (and no call to my_icon(), or the explicit htmlDependency() in my example), then the htmlDependency for Font-Awesome that wins is the one that comes with Shiny, 5.13.0 as of this writing. The browser will request that version of Font-Awesome.

Later, if a renderUI() inserts a my_icon() with a Pro icon, the HTML will be sent to the browser along with an htmlDependency object for Font-Awesome Pro. However, at that point, the browser already has loaded Font-Awesome, and it will not know to load this newer version of it -- Shiny currently is not able to replace the already-loaded version of Font-Awesome with a newer one.

Adding the custom htmlDependency to the static ui object makes it so it can be resolved at initial page render time, and the browser knows to load the newer version from the start. The version I used, 99.0, ensures that this custom version will "win" over any other version of a Font-Awesome htmlDependency.

---

Related Topics