quarto-ext / fontawesome

Use Font Awesome icons in HTML and PDF documents.
https://quarto-ext.github.io/fontawesome/
MIT License
107 stars 10 forks source link

Support more attributes in shortcodes for icon tag compatibility #34

Open r-leyshon opened 1 year ago

r-leyshon commented 1 year ago

I've discovered some curious behaviour when attempting to copy paste HTML code from the fontawesome site for use in quarto docs. Initially it appears that using the HTML syntax does not work. However, including at least one quarto syntax icon in the document allows both syntax types to render as expected. Below is a shell script to help reproduce the behaviour.

# filename="make-reprex.sh"
#!/usr/bin/env bash
# uname -v
# Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
# brew update
# brew install cask quarto
# echo `quarto --version`
# 1.3.450
mkdir broken-icon
cd broken-icon
quarto add quarto-ext/fontawesome
touch broken-icon-reprex.qmd
echo """---
title: Broken Icon Reprex
---
<i class=\"fa-regular fa-face-sad-tear fa-bounce fa-lg\"></i>
""" > broken-icon-reprex.qmd
quarto render broken-icon-reprex.qmd --output bad-icon.html
echo """
{{< fa brands python >}}

""" >> broken-icon-reprex.qmd
quarto render broken-icon-reprex.qmd --output fixed-icon.html
cderv commented 1 year ago

Initially it appears that using the HTML syntax does not work. However, including at least one quarto syntax icon in the document allows both syntax types to render as expected.

This is because if you don't use the shortcode, then the fontawesome dependencies are not loaded into your document. The HTML deps are only inserted in document header when {{< fa ... >}} is used - same for LaTeX dependencies.

If the shortcodes is not used, the the extension does nothing.

r-leyshon commented 1 year ago

I see, so would is it possible to style the icon in the same way as I have above while using shortcode only?

Alternatively, is there a way to ensure fontawesome dependencies get loaded to a document whether or not a shortcode is found?

cderv commented 1 year ago

Regarding your request of not using shortcodes, this is asked in there already

is it possible to style the icon in the same way as I have above while using shortcode only?

Currently there is no way to pass any attributes using shortcode. Only a few is supported https://github.com/quarto-ext/fontawesome/blob/d334eba21d78ca27fe81d86f376e53e6c89b2cc9/_extensions/fontawesome/fontawesome.lua#L68-L71

Alternatively, is there a way to ensure fontawesome dependencies get loaded to a document whether or not a shortcode is found?

See #30 for a wild trick of display: none

Otherwise, don't use the shortcode, and directly use the fontawesome dependencies using include-in-header and some raw HTML or use the Lua version of adding dependencies as mentioned in https://github.com/quarto-ext/fontawesome/issues/30#issuecomment-1721936271

30 should solve your problem. so I'll rephrase this issue as supporting more options