You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Quarto文档中FontAwesome图标与kable/kableExtra兼容异常求助

Quarto中kable/kableExtra与FontAwesome图标兼容问题

在Quarto文档中使用kable或kableExtra生成表格时,FontAwesome图标存在显示异常或无法正常渲染的问题。以下是复现代码及对应输出效果:

1. kable 示例

---
title: FontAwesome and Kable
---

{{< fa brands pagelines >}} {{< fa seedling >}} {{< fa plant-wilt >}}  

```{r}
library(dplyr)
library(knitr)

icons <- c("{{< fa brands pagelines >}}","{{< fa seedling >}}","{{< fa plant-wilt >}}")

x <- iris %>%
  slice(c(1,51,101)) %>%
  mutate(Species=paste0("<span style='background-color:#d7bde2;padding:1px 3px;border-radius:3px;'>",icons," ",Species,"</span>"))
kable(x)
kable(x,format="html",escape=FALSE)
输出效果:
![kable输出截图](https://github.com/haozhu233/kableExtra/assets/5083500/da906360-1d41-4192-a023-b612a4e0134c)

## 2. kableExtra 示例
```qmd
---
title: FontAwesome and KableExtra
---

{{< fa brands pagelines >}} {{< fa seedling >}} {{< fa plant-wilt >}}  

```{r}
library(dplyr)
library(knitr)
library(kableExtra)

icons <- c("{{< fa brands pagelines >}}","{{< fa seedling >}}","{{< fa plant-wilt >}}")

x <- iris %>%
  slice(c(1,51,101)) %>%
  mutate(Species=paste0("<span style='background-color:#d7bde2;padding:1px 3px;border-radius:3px;'>",icons," ",Species,"</span>"))
kable(x)
kable(x,format="html",escape=FALSE)
输出效果:
![kableExtra输出截图](https://github.com/haozhu233/kableExtra/assets/5083500/bbb0f29c-ef55-4f48-992b-d323049e7d86)

## 3. kableExtra 带样式示例
```qmd
---
title: FontAwesome and KableExtra
description: Using FontAwesome icons with kableExtra HTML table
execute:
  message: false
  warning: false
---

{{< fa brands pagelines >}} {{< fa seedling >}} {{< fa plant-wilt >}}  

```{r}
library(dplyr)
library(knitr)
library(kableExtra)

icons <- c("{{< fa brands pagelines >}}","{{< fa seedling >}}","{{< fa plant-wilt >}}")

x <- iris %>%
  slice(c(1,51,101)) %>%
  mutate(Species=paste0("<span style='background-color:#d7bde2;padding:1px 3px;border-radius:3px;'>",icons," ",Species,"</span>"))
kable(x)
kable(x,format="html",escape=FALSE)
kable(x,format="html",escape=FALSE) %>%
  kable_styling(bootstrap_options=c("hover","condensed","responsive"), position="center", full_width=FALSE)
输出效果:
![kableExtra带样式输出截图](https://github.com/haozhu233/kableExtra/assets/5083500/849a71ad-6983-4f91-bd21-7710578af321)

### 使用版本信息
- knitr 1.43
- kableExtra 1.3.4
- quarto 1.3.433

内容的提问来源于stack exchange,提问作者mindlessgreen
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 16:44:52