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