quarto, gt, and fontawesome issue

R Markdown
,
#1

I have a vexing problem, and I am sorry I cannot easily provide a reprex of the issue. I have created a quarto website for my course. In that project I have created a table with some columns that have fontawesome icons that will link to either pages within the website or external links. Basically, something like this

tibble(
  words = c("a", "b", "c"),
  fa = "['<i class='fa-solid fa-video'></i>'](./path/to_doc.qmd)") %>% 
  gt() %>% 
  fmt_markdown(columns = c(fa)) %>% 
  cols_label(
    words = md("<i class='far fa-calendar'></i>")
  )

But it will not render with the fontawesome icons. It worked with Rmarkdown in years past. Also, it seems I was able to render it at one time, but that behavior stopped. So I do think something is wrong with the code necessarily, but with how my project is set up in some way (organized, defaults, something).

quarto, gt, fontawesome, embedded files
#2

R Markdown and Quarto works a bit differently, especially regarding tables. gt will output some HTML and Quarto will parse this HTML. If you have some Markdown content to be processed you have two solutions

Some questions:

  • Are you loading fontawesome somewhere in your document to be available in the rendered HTML ? Fontawesome is an external library and it needs to be included for the icon to be found.

Is this expected to have ' around the i tag ? I believe it should be

[<i class='fa-solid fa-video'></i>](./path/to_doc.qmd)

unless you wanted to show the string itself.

Hope it helps

#3

Thank you very much for the response! Unfortunately I am still not able to get it work.

#4

What is the answer to this question ? How to you load fontawesome JS library in your document ?

#5

Sorry! Yes, I am loading fontawesome library(fontawesome) at the top of the script

#6

This does not insert the JS library into the resulting HTML. It just load the fontawesome R library. But you are not using any of the fontawesome function that insert in the doc, so at the end you have no JS lib in the HTML

It would be the same with https://github.com/quarto-ext/fontawesome extensions for Quarto if you don't use any {{< fa ... >}} in the document.

So either use one of this, or explicitly load the library.

With R you should be able to do with a recent htmltools version.

```{r, echo = FALSE}
fontawesome::fa_html_dependency()
```
#7

This worked! I added the code you provided fontawesome::fa_html_dependency() to my script, and all was right again.

Thank you SO much for taking the time and having the patience to help me!

Is there a reason why I didn't need this line of code in the previous versions of my document and website (Rmarkdown)? I am just curious for my own learning.

Thanks again!

#8

While I can't directly debug your specific project without access to the entire codebase and project setup, I can offer some general suggestions to help you troubleshoot and potentially resolve the problem:

  1. Check Font Awesome Library: Make sure that the Font Awesome library is properly included and loaded in your Quarto project. You should have a reference to the Font Awesome CSS or JS file in the HTML header of your project.

htmlCopy code

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

Ensure that the link is correct and that it points to a working Font Awesome version.
2. Verify Markdown Syntax: Double-check the Markdown syntax for embedding Font Awesome icons. In your example, you're using <i class='fa-solid fa-video'></i> within backticks, which should work fine for rendering Font Awesome icons. Ensure there are no syntax errors in your Markdown.
3. Check Quarto Configuration: Review your Quarto project's configuration and settings. Ensure that there are no custom configurations or themes that might interfere with Markdown rendering.
4. Inspect Browser Console: When you view your Quarto website in a web browser, open the browser's developer tools (usually by pressing F12 or right-clicking and selecting "Inspect"). Go to the console tab and check if there are any JavaScript errors or warnings related to Font Awesome or Markdown rendering. This can provide clues about the issue.
5. Update Dependencies: Ensure that your Quarto project and its dependencies are up-to-date. Outdated dependencies can sometimes lead to compatibility issues.
6. Test on a Clean Environment: Create a minimal test page or project with a simple table and Font Awesome icon to see if the issue persists. This can help determine if the problem is related to your specific project configuration.
7. Reach Out to Quarto Community: If the issue persists and you believe it's related to Quarto or its specific setup, consider reaching out to the Quarto community or support resources. They may have encountered similar issues and can provide more specific guidance based on the Quarto platform.

#9

Thank you so much for your helpful suggestions!

Also, I was able to fix the issue by adding fontawesome::fa_html_dependency() to the script.

#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.