self_contained为true时R Markdown无法渲染CDN引入的Font Awesome图标

• 你当前把Font Awesome的CSS外链放在页脚（after_body）位置引入，开启self_contained: true时，Pandoc只会主动处理文档头部引入的外部资源并打包进单文件，不会处理body末尾引入的CSS关联的字体文件，导致图标依赖的webfont资源缺失，无法渲染。
• 你写的页脚文件里，Font Awesome的link标签末尾多了一个多余的-->注释闭合符，本身存在HTML语法错误，会进一步导致资源加载失败。

方案1：将CSS资源移到文档头部引入（推荐） #

这是最稳定的方案，Pandoc可以正确识别头部引入的CSS，自动拉取其关联的所有字体资源打包进自包含HTML：

• 新建名为header.html的头部引入文件，写入修正后的Font Awesome引入代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

• 修改R Markdown文件的YAML头配置，新增in_header参数引入头部文件，同时删除页脚文件里的Font Awesome引入代码：

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

• 修正后的samplefooter.html仅保留页脚内容即可：

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

渲染后即可在自包含模式下正常显示所有图标。

方案2：使用fontawesome R包插入图标（无需手动管理CDN） #

直接调用R官方维护的fontawesome包生成图标，不需要手动写CDN引入，自包含模式下会自动嵌入所有图标资源：

1. 先安装包：在R控制台运行install.packages("fontawesome")
2. 直接在R Markdown的代码块中调用函数插入图标即可，不需要额外写HTML标签：

# 实心样式用户图标
fontawesome::fa("user", type = "solid")
# 常规样式用户图标
fontawesome::fa("user", type = "regular")
# 品牌类Github图标
fontawesome::fa("github-square", type = "brands")

页脚的图标也可以通过该函数生成后插入，不需要单独维护HTML页脚里的标签。

方案3：添加Pandoc参数允许拉取尾部引入的资源 #

如果不想调整现有文件结构，可以在YAML中添加Pandoc启动参数，允许其在自包含模式下联网拉取文档任意位置引入的外部资源，该方案依赖渲染时的网络环境，稳定性弱于前两种：

---
title: "Test for fontawesome icon"
output:
  html_document:
    self_contained: true
    includes:
      after_body: samplefooter.html
    pandoc_args: ["--allow-network"]
---

注意：使用该方案前必须先删除页脚文件中link标签末尾多余的-->符号，修复HTML语法错误。

内容的提问来源于stack exchange，提问作者wkth