Support for Font Awesome 5 glyphs in navbar

[andrewheiss]

By filing an issue to this repo, I promise that

• I have fully read the issue guide at https://yihui.name/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.

---

Support for Font Awesome 5 was added in #1340 and it works great when used in an HTML document:

---
title: something
output: html_document
---

Here's the R icon: <i class="fab fa-r-project"></I>

However, it's currently not possible to use Font Awesome 5 icons in the navbar in HTML documents. The code that is generated hard codes the fa prefix in the CSS class, which breaks the Font Awesome rendering engine.

Here's a reprex:

index.Rmd:

---
title: something
output: html_document
---

Here's the R icon: <i class="fab fa-r-project"></I>

_site.yml:

name: "testing-site"
navbar:
  title: "Testing"
  left:
    - text: "Home"
      icon: fa-home
      href: index.html
    - text: "R stuff"
      icon: fab fa-r-project
      href: index.html

Building the site generates the following HTML spans in the navbar:

• <span class="fa fa-home"></span>: This works and shows the home icon
• <span class="fab fa fab fa-r-project"></span>: This adds an extra fab and fa which makes Font Awesome display a "glyph missing" glyph

If I use icon: fa-r-project in _site.yml instead of the full fab fa-r-project, I get this HTML:

• <span class="fa fa-r-project"></span>: This doesn't add an extra fab (but now there's no fab), and this still adds an fa, which makes the glyph not display.

Ideally, this should be the correct output:

• <span class="fab fa-r-project"></span>

---

Session information:

R version 3.5.2 (2018-12-20)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS Mojave 10.14.3, RStudio 1.2.1327

Locale: en_US.UTF-8 / en_US.UTF-8 / en_US.UTF-8 / C / en_US.UTF-8 / en_US.UTF-8

Package version:
  base64enc_0.1.3 digest_0.6.18   evaluate_0.13   glue_1.3.0.9000 graphics_3.5.2  grDevices_3.5.2
  highr_0.7       htmltools_0.3.6 jsonlite_1.6    knitr_1.22      magrittr_1.5    markdown_0.9   
  methods_3.5.2   mime_0.6        Rcpp_1.0.0      rmarkdown_1.12  stats_3.5.2     stringi_1.3.1  
  stringr_1.4.0   tinytex_0.11    tools_3.5.2     utils_3.5.2     xfun_0.5        yaml_2.2.0     

Pandoc version: 2.5

[yihui]

This is a bug. Thanks for the report! Reprex in a single zip file: site.zip

I don't have time to fix it right now, but in case anyone wants to help, the fix should probably start from here:

rmarkdown/R/html_document.R

Lines 633 to 646 in 63418e2

	navbar_link_text <- function(x, ...) {
	if (!is.null(x$icon)) {
	# find the iconset
	split <- strsplit(x$icon, "-")
	if (length(split[[1]]) > 1)
	iconset <- split[[1]][[1]]
	else
	iconset <- ""
	tagList(tags$span(class = paste(iconset, x$icon)), " ", x$text, ...)
	}
	else
	tagList(x$text, ...)
	}

When we upgraded FontAwesome to v5.1.0 last year in #1388, we should have noticed that the fa prefix had been deprecated in version 5: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

[ppdebem]

Removing the split for the iconset in the navbar_link_text function and updating the navbar_icon_dependencies function with the new prefixes seems to work:

navbar_link_text <- function(x, ...) {

  if (!is.null(x$icon)) {
    tagList(tags$span(class = paste(x$icon)), " ", x$text, ...)
  }
  else
    tagList(x$text, ...)
}

navbar_icon_dependencies <- function(navbar) {

  # read the navbar source
  source <- read_utf8(navbar)

  # find icon references
  res <- regexec('<(span|i) +class *= *("|\') *(fab fa|fas fa|ion ion)-', source)
  matches <- regmatches(source, res)
  libs <- c()
  for (match in matches) {
    if (length(match) > 0)
      libs <- c(libs, match[[4]])
  }
  libs <- unique(libs)

  # return their dependencies
  html_dependencies_fonts("fab fa" %in% libs | "fas fa" %in% libs,"ion ion" %in% libs)
}

But the user needs to specify the icon set prefix in the _site.yml file like so:

name: "testing-site"
navbar:
  title: "Testing"
  left:
    - text: "Home"
      icon: fas fa-home
      href: index.html
    - text: "R stuff"
      icon: fab fa-r-project
      href: index.html

Building from this results in the following spans:

  <a href="index.html">
    <span class="fas fa-home"></span>
     
    Home
  </a>

  <a href="index.html">
    <span class="fab fa-r-project"></span>
     
    R stuff
  </a>

Pic:

[jhelvy]

Removing the split for the iconset in the navbar_link_text function and updating the navbar_icon_dependencies function with the new prefixes seems to work:

navbar_link_text <- function(x, ...) {

  if (!is.null(x$icon)) {
    tagList(tags$span(class = paste(x$icon)), " ", x$text, ...)
  }
  else
    tagList(x$text, ...)
}

navbar_icon_dependencies <- function(navbar) {

  # read the navbar source
  source <- read_utf8(navbar)

  # find icon references
  res <- regexec('<(span|i) +class *= *("|\') *(fab fa|fas fa|ion ion)-', source)
  matches <- regmatches(source, res)
  libs <- c()
  for (match in matches) {
    if (length(match) > 0)
      libs <- c(libs, match[[4]])
  }
  libs <- unique(libs)

  # return their dependencies
  html_dependencies_fonts("fab fa" %in% libs | "fas fa" %in% libs,"ion ion" %in% libs)
}

But the user needs to specify the icon set prefix in the _site.yml file like so:

name: "testing-site"
navbar:
  title: "Testing"
  left:
    - text: "Home"
      icon: fas fa-home
      href: index.html
    - text: "R stuff"
      icon: fab fa-r-project
      href: index.html

Building from this results in the following spans:

  <a href="index.html">
    <span class="fas fa-home"></span>
     
    Home
  </a>

  <a href="index.html">
    <span class="fab fa-r-project"></span>
     
    R stuff
  </a>

Pic:

Can you provide more detailed instructions for how to do this? How do I edit these functions if they're embedded in the rmarkdown library?

[jhelvy]

I've created a fork that fixes this issue following the suggestion above, but the user has to specify the icon set prefix, e.g. fab fa-python instead of just fa-python. But shouldn't this be the desired format anyway since there are now multiple different prefixes? If so, the documentation for using icons in the navbar will also need to be updated.

https://github.com/jhelvy/rmarkdown

[jhelvy]

Woohoo! Thanks for making this fix!

[cderv]

@jhelvy yeah it was about time 😅 better later than never... 🙄

Please report back if there are still some issues. But I believe it should be fixed regarding navbar in Rmarkdown website. 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.