Too small icon with valueBox and font awesome

[pgramme]

Hi!

It seems that an update to FontAwesome (or to shiny?) somehow broke valueBox. The icon is now represented too small, same size as the text, on a separate line below the text. This only concerns FontAwesome, I had no problem using other icons, e.g. ion-android-done-all.

The problem is reproducible, with the example from the documentation

My dashboard was unchanged since May 1st 2018 and looked OK then. Problem encountered now, with flexdashboard 0.5.1, shiny 1.1.0 (also tried shiny 1.0.5)

Is there any possible workaround?

[pgramme]

Update: restoring rmarkdown to version 1.9 instead of 1.10 solves the problem. It is rather a workaround than a solution, however.

[beansrowning]

I have the same issue. All other icons seem to be functional other than font-awesome.

[jjallaire]

@rich-iannone Could you take a look at this?

[rich-iannone]

@jjallaire I will. Thanks!

[yihui]

It seems to be caused by rstudio/rmarkdown#1340. devtools::install_github('rstudio/rmarkdown@3953abd473e9230faca4dcad996d5d1b35c3b3a7') works, and devtools::install_github('rstudio/rmarkdown@92f628ff22b3a1c583274194be55b893c3229912') does not.

[jjallaire]

@rich-iannone Have you discovered a change we can make here? As things currently stand I think that value boxes are broken (visually) by the font awesome update. My presumption is that the fix might just be a CSS tweak. Let me know and let's see if we can resolve this one soon.

[rich-iannone]

@jjallaire I think that some CSS is indeed causing the problem. In my local version of rmarkdown I made the upgrade to the newest FontAwesome 5 release and added a different stylesheet. Here is the dependency:

html_dependency_font_awesome <- function() {
  htmlDependency(
    "font-awesome",
    "5.1.0",
    src = rmarkdown_system_file("rmd/h/fontawesome"),
    script = c(
      "js/all.js",
      "js/v4-shims.js"),
    stylesheet = c(
      "css/all.css",
      "css/v4-shims.css")
  )
}

But the problem persists afterward. On my system, I don't get three boxes in a row (and this is whether I use FA icons or not).

Here is the document where I don't use the icons in the valueBoxs:

---
title: "Issue_189"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Row
-----------------------------------------------------------------------

### Articles per Day

```{r}
articles <- 45
valueBox(articles)
```

### Comments per Day

```{r}
comments <- 126
valueBox(comments)
```

### Spam per Day

```{r}
spam <- 15
valueBox(spam,
         color = ifelse(spam > 10, "warning", "primary"))
```

I'm going to now have a closer look at the included stylesheets.

[rich-iannone]

@jjallaire I arrived at a fix. The idea is to not use any JS dependencies (as before with version 4.5.0):

html_dependency_font_awesome <- function() {
  htmlDependency(
    "font-awesome",
    "5.1.0",
    src = rmarkdown_system_file("rmd/h/fontawesome"),
    stylesheet = c(
      "css/all.css",
      "css/v4-shims.css")
  )
}

I'll submit as a PR in rstudio/rmarkdown.

[jjallaire]

This should now be fixed on master (via installation of the dev version of rmarkdown)