quarto and fontawesome icons do not work properly with styling

[royfrancis]

kable

Code

---
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>"))
```

```{r}
kable(x)
```

```{r}
kable(x,format="html",escape=FALSE)
```

kableExtra

Code

---
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>"))
```

```{r}
kable(x)
```

```{r}
kable(x,format="html",escape=FALSE)
```

kableExtra with styling

Code

---
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>"))
```

```{r}
kable(x)
```

```{r}
kable(x,format="html",escape=FALSE)
```

```{r}
kable(x,format="html",escape=FALSE) %>%
  kable_styling(bootstrap_options=c("hover","condensed","responsive"), position="center", full_width=FALSE)
```

knitr 1.43
kableExtra 1.3.4
quarto 1.3.433

[sadtangerine]

use fa() function from fontawesome package to assign your code (just verify name supported with fa() on fontawesome website)

icons <- c(fa("fab fa-pagelines"),
           fa("fas fa-seedling"),
           fa("fas fa-plant-wilt"))

x <- iris %>%
  slice(c(1,51,101)) %>%
  mutate(Species=paste0("<span style='background-color:#d7bde2;padding:1px3px;border-radius:3px;'>",
                        icons," ",Species,"</span>"))

kable(x,
  table.attr = "quarto-disable-processing=true"format="html", ## need to include for rendering
  escape=FALSE) %>%
  kable_styling(bootstrap_options=c("hover","condensed","responsive"), 
                position="center", 
                full_width=FALSE)