我正在try 在Rmarkdown 文档中添加字体很棒的图标,并将其呈现到HTML文件中.我在页脚中包含了字体Awesome CDN CSS链接,并使用includes参数将其包含在文档中.当self_contained YAML参数设置为false时,图标可能会显示.

但是,当self_contained设置为true时,图标不会显示.

Rendered HTML document with self_contained: false

enter image description here

Rendered HTML document with self_contained: true

enter image description here

示例文档

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页脚(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::会话信息

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   

推荐答案

正如我在 comments 中所说,rmarkdown包含了字体很棒的css,但没有包含图形文件.因此,当self_contained = true时,你看不到图像.font awesome css文件在其来源的"webfonts"文件夹中查找图像.在css文件的底部可以找到@font-face {src: url(../webfonts/fa-regular-400.eot);.

当rmarkdown生成self_contained文件时,它会将图像转换为base64,以将其直接加载到文档的html中.您可以对正在使用的图标执行相同的操作.

下面的解决方案只是将background-image(base64编码)添加到已经在使用的font awesome类中.您可以在页面的任何位置添加代码;为了测试,我在页脚的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. 我下载了"免费上网"zip file from font-awesome
  2. 我从"svgs"文件夹中抓取了感兴趣的单个图标
  3. 我在self_contained rmarkdown临时标记中包含了<img src="github.svg" />,以获取每个svg文件的base64编码字符串(您可以改用base64在线编码器).
  4. 我从构建的html文件中获取了编码字符串,并将它们放在上面的代码中.

To note: self_contained文件非常大,因为它包含所有jquery、bootstrap和font-awesome css/js文件.我们把它做得更大了!我的机器有5.2 MB,除了小图标之外,没有其他任何东西!如果这是我的项目,我会考虑不加载字体很棒的css,而是复制与我使用的图标相关的css行.

R相关问答推荐

R -模运算后的加法

高质量地将R格式的图表从Word中输出

基于R中的GPS点用方向箭头替换点

带有gplot 2的十字舱口

如何在xyplot中 for each 面板打印R^2

R for循环返回到先前值

将非重复序列高效转换为长格式

在数组索引上复制矩阵时出错

如何写商,水平线,在一个单元格的表在R

通过在colname中查找其相应值来创建列

当我添加美学时,geom_point未对齐

在列表中排列R数据框中的列顺序

基于Key->Value数据帧的基因子集相关性提取

如何对r中包含特定(未知)文本的行求和?

以不同于绘图中元素的方式对GG图图例进行排序

在ggplot2图表中通过端点连接点

基于R中的引用将向量值替换为数据框列的值

将仪表板中的值框大小更改为Quarto

在R中添加要打印的垂直线

如何计算多个变量的百分比与总和的百分比?