Render CDN fontawesome icons in self-contained R Markdown

Question

I am trying to add Font Awesome icons in a rmarkdown document and render it to an HTML file. I included the Font Awesome CDN CSS link in the footer and included it in the document using the includes argument. The icons could show when the self_contained YAML argument is set to false .

However, when self_contained is set to true , the icons do not show.

Rendered HTML document with self_contained: false

Rendered HTML document with self_contained: true

Sample documents

rmarkdown

---
title: "Test for fontawesome icon"
output:
  html_document:
    self_contained: true
    includes:
      after_body: samplefooter.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)
```

Testing whether fontawesome icons could be shown

<!-- solid style -->
<i class="fas fa-user"></i>

<!-- regular style -->
<i class="far fa-user"></i>

<!--brand icon-->
<i class="fab fa-github-square"></i>

HTML Footer ( samplefooter.html )

<footer>
  <br>
  <!-- Add fa icon library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> -->

  <hr />

  <p style="text-align: center;">
    <a href="" title="icon 1" class="fas fa-globe-asia"></a>
    <a href="" title="icon 2" class="fab fa-github"></a>
    <a href="" title="icon 3" class="fas fa-envelope"></a>
  </p>

  <br>
</footer>

---

xfun::session_info()

R version 4.1.0 (2021-05-18)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS 12.3.1, RStudio 2022.2.3.492

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

Package version:
  askpass_1.1        base64enc_0.1.3    bslib_0.2.5.1      cachem_1.0.5       callr_3.7.0        cli_3.1.0          colorspace_2.0-2  
  commonmark_1.7     compiler_4.1.0     cpp11_0.4.2        crayon_1.4.2       curl_4.3.2         digest_0.6.29      ellipsis_0.3.2    
  evaluate_0.14      fansi_0.5.0        farver_2.1.0       fastmap_1.1.0      fs_1.5.0           fst_0.9.4          glue_1.5.1        
  graphics_4.1.0     grDevices_4.1.0    highr_0.9          htmltools_0.5.2    httpuv_1.6.1       httr_1.4.2         jquerylib_0.1.4   
  jsonlite_1.7.2     kableExtra_1.3.4   knitr_1.36         labeling_0.4.2     later_1.2.0        lifecycle_1.0.1    magrittr_2.0.1    
  methods_4.1.0      mime_0.12          munsell_0.5.0      openssl_1.4.5      packrat_0.7.0      parallel_4.1.0     pillar_1.6.4      
  pkgconfig_2.0.3    processx_3.5.2     promises_1.2.0.1   ps_1.6.0           R6_2.5.1           rappdirs_0.3.3     RColorBrewer_1.1.2
  Rcpp_1.0.7         rlang_0.4.12       rmarkdown_2.14     rsconnect_0.8.25   rstudioapi_0.13    rvest_1.0.0        sass_0.4.0        
  scales_1.1.1       selectr_0.4.2      shiny_1.6.0        sourcetools_0.1.7  stats_4.1.0        stringi_1.7.5      stringr_1.4.0     
  svglite_2.0.0      sys_3.4            systemfonts_1.0.2  tibble_3.1.6       tinytex_0.32       tools_4.1.0        utf8_1.2.2        
  utils_4.1.0        vctrs_0.3.8        viridisLite_0.4.0  webshot_0.5.2      withr_2.4.3        xfun_0.31          xml2_1.3.2        
  xtable_1.8-4       yaml_2.2.1   

Answer 1

Like I said in my comment, rmarkdown is including the font-awesome css but not the graphic files. Therefore, when self_contained = true you don't see the images. The font-awesome css file looks for the images in the "webfonts" folder where it's sourced. At the bottom of the css file you'll find @font-face {src: url(../webfonts/fa-regular-400.eot); .

When rmarkdown makes a self_contained file, it converts images to base64 to load them directly into the html of the document. You could do the same for the icons you are using.

The solution below just adds a background-image (base64 encoded) to the font-awesome classes already in use. You can add the code anywhere in the page; for testing, I added it right below your css link in the footer. Note: below I truncated the base64 strings for brevity.

<style type="text/css">
    .fa-github-square:before {
    content: "\a0\a0\a0\a0";
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0ia ... ")!important;
    }
    .fa-github:before {
    content: "\a0\a0\a0\a0";
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo ... ")!important;
    }
    .fa-globe-asia:before {
    content: "\a0\a0\a0\a0";
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53 ...")!important;
    }
    .fa-envelope:before {
    content: "\a0\a0\a0\a0";
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0ia ...")!important;
    }
    .fa-user:before {
    content: "\a0\a0\a0\a0";
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i ... ")!important;
    }
  </style>

I used the path of least resistance to get the base64 image strings:

1. I downloaded the "free for web" zip file from font-awesome
2. I grabbed individual icons of interest from the "svgs" folder
3. I included an <img src="github.svg" /> in a temporary self_contained rmarkdown to get the base64 encoded string for each of the svg files (you can use base64 online encoders instead).
4. I grabbed the encoded strings from the built html file and put them in the code above.

To note: The self_contained file is very large because it contains all the jquery, bootstrap, and font-awesome css/js files. And we just made it even larger! It's 5.2 MB in my machine without anything else except the little icons! If this was my project, I would consider not loading the font-awesome css and instead copy the few css lines that are pertinent to the icons I was using.