在独立的R Markdown中渲染CDN fontawesome图标

Question

我正在尝试在rmarkDown文档中添加字体真棒图标，并将其渲染到HTML文件。我在页脚中包括了字体很棒的CDN CSS链接，并使用include参数将其包括在文档中。这些图标可以显示self_contained yaml参数设置为false。

但是，当self_contained设置为true时，图标不显示。

使用self_contained渲染的html文档：false

​

​/2ugvc.png“ rel =” nofollow noreferrer“>

示例示例文档文档

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

就像我在评论中所说的那样，RmarkDown包括字体可感知的CSS，但不包括图形文件。因此，当self_containing = true时，您看不到图像。 Font-Saw-the CSS文件在其采购的“ WebFonts”文件夹中查找图像。在CSS文件的底部，您会找到@font-face {src：url（../ webfonts/fa-regular-400.eot）;。

当rmarkDown制作self_contained文件时，它将图像转换为base64以将它们直接加载到文档的HTML中。您可以为所使用的图标做同样的事情。

下面的解决方案仅在已经使用的字体引人入胜的类中添加了background-image（基本64）。您可以在页面中的任何位置添加代码；为了进行测试，我将其添加到页脚中的CSS链接下方。 注意：下面我截断了Base64字符串以使其简洁。

<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>

我使用了阻力最小的路径来获取base64映像字符串：

1. 我下载了“ for web” 从字体中-awesome
2. 我从“ svgs”文件夹中获取了单独的图标，
3. 我包括＆lt; img src =“ github.svg”/＆gt;代码> rmarkDown以获取每个SVG文件的base64编码字符串（您可以使用Base64在线编码器）。
4. 我从已构建的HTML文件中抓住了编码的字符串，然后将它们放入上面的代码中。

要注意： self_contained文件非常大，因为它包含所有jQuery，bootstrap和Font-font-the-bootstrap和font-forty-bootstrap和font-forth-bootstrap和font-the>。我们只是使它更大！我的机器中的5.2 MB，除了小图标之外，没有其他任何东西！如果这是我的项目，我会考虑不加载字体可感知的CSS，而是复制与我使用的图标相关的几条CSS线路。