Brand icons like fa-github no longer work with rmarkdown 2.6

[jdblischak]

---

By filing an issue to this repo, I promise that

• I have fully read the issue guide at https://yihui.org/issue/.
• I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('rmarkdown'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/rmarkdown').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

---

What is the plan for supporting Font Awesome 4? The "brand" icons stopped working with the recently released rmarkdown 2.6, but I didn't see anything in the release notes that support for Font Awesome 4 was dropped.

Background

The rmarkdown book chapter 10.5.4 instructs you to insert Font Awesome favicons in the navigation bar of an R Markdown website using only the icon name, e.g. fa-home, fa-info, fa-gear, etc. While support for Font Awesome 5 was added in rmarkdown 1.10, rmarkdown continued to support the syntax for brand icons for Font Awesome 4 as of rmarkdown 2.5.

My package workflowr inserts the GitHub icon, fa-github, which no longer works. I can bump the minimal rmarkdown version required to 1.10 and switch to having the package instead insert fab fa-github. This will work fine for future websites created with workflowr. However, any existing site that gets updated with rmarkdown 2.6 will lose the icon. Thus if possible, it would be convenient if support for Font Awesome 4 "brand" icons could be reinstated. See workflowr/workflowr#231.

Reproducible example

Below is a reproducible example:

path <- tempfile()
dir.create(path)
index <- file.path(path, "index.Rmd")
file.create(index)
config <- list(
  navbar = list(
    left = list(
      list(
        text = "Home",
        icon = "fa-home",
        href = "index.html"
      ),
      list(
        text = "Home",
        icon = "fas fa-home",
        href = "index.html"
      ),
      list(
        text = "GitHub",
        icon = "fa-github",
        href = "index.html"
      ),
      list(
        text = "GitHub",
        icon = "fa fa-github",
        href = "index.html"
      ),
      list(
        text = "GitHub",
        icon = "fab fa-github",
        href = "index.html"
      )
    )
  ),
  output = "html_document"
)
site <- file.path(path, "_site.yml")
yaml::write_yaml(config, site)
html <- rmarkdown::render_site(index)
html <- file.path(path, html)
browseURL(html)

When I run it with rmarkdown 2.5, all the icons render.

remotes::install_version("rmarkdown", "2.5")

> grep('span class="fa', readLines(html), value = TRUE)
[1] "    <span class=\"fa fa-home\"></span>"          
[2] "    <span class=\"fas fa fas fa-home\"></span>"  
[3] "    <span class=\"fa fa-github\"></span>"        
[4] "    <span class=\"fa fa fa fa-github\"></span>"  
[5] "    <span class=\"fab fa fab fa-github\"></span>"

When I run it with rmarkdown 2.6 from CRAN (or the GitHub version), specifying fa-github doesn't work.

remotes::install_github("rstudio/rmarkdown")

> grep('span class="fa', readLines(html), value = TRUE)
[1] "    <span class=\"fas fa-home\"></span>"       
[2] "    <span class=\"fas fa-home\"></span>"       
[3] "    <span class=\"fas fa-github\"></span>"     
[4] "    <span class=\"fa fa fa fa-github\"></span>"
[5] "    <span class=\"fab fa-github\"></span>" 

Instead of inserting fa in front of fa-github, it now inserts fas, which only works for solid icons like fa-home, and not brand icons like fa-github.

Session information

> xfun::session_info("rmarkdown")
R version 4.0.3 (2020-10-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19042), RStudio 1.4.1081

Locale:
  LC_COLLATE=English_United States.1252 
  LC_CTYPE=English_United States.1252   
  LC_MONETARY=English_United States.1252
  LC_NUMERIC=C                          
  LC_TIME=English_United States.1252    

Package version:
  base64enc_0.1.3    digest_0.6.27      evaluate_0.14     
  glue_1.4.2         graphics_4.0.3     grDevices_4.0.3   
  highr_0.8          htmltools_0.5.0    jsonlite_1.7.1    
  knitr_1.30         magrittr_2.0.1     markdown_1.1      
  methods_4.0.3      mime_0.9           rlang_0.4.9       
  rmarkdown_2.6.0003 stats_4.0.3        stringi_1.5.3     
  stringr_1.4.0      tinytex_0.27       tools_4.0.3       
  utils_4.0.3        xfun_0.19          yaml_2.2.1        

Pandoc version: 2.11.2

[cderv]

Hi @jdblischak,

Fontawesome 5 upgrade was incomplete and there was an old issue (#1554) that we tried to fix in #1967. It seems we forgot the NEWS bullet 😞
It seems the fix has side effect I did not foresee sorry.

We followed the new fontawesome doc to use fas by default.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

I have a closer look into how better support both version for old configuration to. I am just puzzled to see that fa-github would work without fab 🤔

Upgrading dependencies is always tricky.

[cderv]

@jdblischak the PR should fix this.

Thanks a lot for your reproducible example, that helped a lot for testing !!

[jdblischak]

@cderv Thanks for the quick fix!

I confirmed that your PR fixes the Issue, and nicely supports both Font Awesome 4 and 5.

remotes::install_github("rstudio/rmarkdown#1994")

> grep('span class="fa', readLines(html), value = TRUE)
[1] "    <span class=\"fa fa-home\"></span>"   
[2] "    <span class=\"fas fa-home\"></span>"  
[3] "    <span class=\"fa fa-github\"></span>" 
[4] "    <span class=\"fa fa-github\"></span>" 
[5] "    <span class=\"fab fa-github\"></span>"

[jdblischak]

Going forward, how would you recommend I have workflowr insert the favicon? It currently uses fa-github. For long-term stability of the sites created by workflowr, should I update the package function to instead insert icon: fab fa-github?

[cderv]

Fontawesome 5 and later will indeed use fab prefix. It would be best to use this IMO to not rely on Fontawesome trick for migration between V4 and V5. But this would require you to bump rmarkdown requirement to 2.6 where fab fa-github is supported.

If you were to insert the icons yourself in body and not in navbar you would have to use the all prefix + name. Only icon: in navbar does add a default prefix.

But both way will work - do as you see fit! :)

[jdblischak]

But this would require you to bump rmarkdown requirement to 2.6 where fab fa-github is supported.

Good point. I'll add a version check. If rmarkdown is >= 2.6, I'll add fab fa-github, and only fa-github otherwise. Thanks!

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.