quarto-ext / fontawesome Goto Github PK

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

Hi! Not sure whether to report as an issue or not but the fontawesome extension doesn't work with Quarto version 0.9.644 (and possibly any version <1.0?).

Steps to reproduce:

1. Create website with quarto create-project mysite --type website
2. Install fontawesome extension in the mysite folder with quarto install extension quarto-ext/fontawesome
3. Edit index.qmd and add line {{< fa lemon >}}
4. Run quarto preview mysite

The following returns this error:
Error running filter C:/Users/Paulius/AppData/Local/Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:
[string "---------------------------------------------..."]:1477: attempt to index a string value (local 'v')
stack traceback:
[string "---------------------------------------------..."]:1589: in field 'addHtmlDependency'
...ysite_extensions\quarto-ext\fontawesome\fontawesome.lua:6: in upvalue 'ensureHtmlDeps'
...ysite_extensions\quarto-ext\fontawesome\fontawesome.lua:57: in field 'handle'
.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:2906: in function 'callShortcodeHandler'
.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:2843: in function 'transformShortcodeBlocks'

Updating Quarto to latest resolved the issue. Perhaps a solution could be adding a version dependency that throws a prompt to update Quarto?

Once the extension is installed in the project it would be great to be able to use them in _quarto.yml as well, e.g., for tools.

Sometimes I find myself using font awesome without need or ability to use short codes. E.i. programmatically constructed content.

I can turn on the linking with <div style="display:none;">{{< fa thumbs-up >}}</div> but that isn't super neat. without looking at the internals, being able to do something << fa activate=true >> would be nice way to link the files without adding an icon in the process

Hi folks!

As far as I can see the current fontawesome(-extention) can't display the new X Logo (formerly know as twitter). Does someone have a work around or will there be an update soon?

Yours
Norman

---
title: "text example"
author: "ajay"
format: revealjs
editor: visual
---

My Website

Please use this link

FA Icon

{{< fa globe >}} My website link

In the above example, when we switch tabs between the "Source" and "Visual" the URL link next to the used font icon disappears.

Hi, thank you for this great extension.

Do you have information on which icons are included?
For example, rabbit does not seem to be available.

Consider the following

{{< fa book style="color: #003262" title="Reading Assignment Icon" >}} 

This is evaluated to:

<i class="fa-solid fa-book" title="Reading Assignment Icon" aria-label="book">

Notice the style keyword that allows for color to be set is MIA.

The expected output would be:

<i class="fa-solid fa-book" style="color: #003262" title="Reading Assignment Icon" aria-label="book">

Though, glancing at the minimal example, I think the style keyword was intentionally omitted. Thus, this is more of a feature request than a bug report.

https://github.com/quarto-ext/fontawesome/blob/main/example.qmd

We got a question on out typst talk today about typst support for icons. This extension should support it. There's typst code for fontawesome here: https://github.com/matchy233/typst-chi-cv-template/blob/main/fontawesome.typ

We should make this all work.

I have a font awesome icon in the first sentence of this post. But it doesn't show up in the post preview.

Perhaps this is stemming from a lack of knowledge on my part, but I'm having trouble specifying an aria-label for an icon obtained using shortcode. A simple example is: {{< fa volume-high title="listen" aria-label="listen" >}}. Running quarto preview and inspecting the source code for the icon in a web browser (I've tried both Firefox 114.0.1 and Safari 16.5), I get: <i class="fa-solid fa-volume-high" title="listen" aria-label="volume-high"></i>. It appears that the aria-label that I specified in the shortcode has failed to override the aria-label that is seemingly pre-associated with the icon. Is there any known way to specify my own aria-label in this way? I'm using quarto 1.3.433 on MacOS Ventura 13.4.

This will also solve

• #28

Discussed in quarto-dev/quarto-cli#1619

The following code does not display FA icon in code block.

---
title: "Untitled"
format: html
---

    {{< meta title >}}

    {{< fa thumbs-up >}}

<pre><code>Untitled


</code></pre>

There are some recommendations at https://fontawesome.com/docs/web/dig-deeper/accessibility for accessibility of Font Awesome icons. Generally, they include adding aria-hidden="true" and adding a title for icons with semantic or iterative meaning. It would be good to incorporate these in the extension.

Not limited to this repository, but if we install the quarto extension, our repository will include the filter scripts, etc., so it would be easier to handle if the License is written in each file, or _extension.yml.

Hi,

I imagine this is an issue I have produced but just in case. Does this error log mean anything to you?

6:08:43 PM: ────────────────────────────────────────────────────────────────
6:08:43 PM: Plugin "@quarto/netlify-plugin-quarto" failed
6:08:43 PM: ────────────────────────────────────────────────────────────────
6:08:43 PM: ​
6:08:43 PM: Error message
6:08:43 PM: Error: Error message
6:08:43 PM: Command failed with exit code 1: /tmp/quarto/bin/quarto render (https://ntl.fyi/exit-code-1)
6:08:43 PM: [ 1/26] about.qmd
6:08:43 PM: Error running filter /tmp/quarto/share/filters/quarto-pre/quarto-pre.lua:
6:08:43 PM: _extensions/quarto-ext/fontawesome/fontawesome.lua:63: attempt to call a nil value (field 'is_format')
6:08:43 PM: stack traceback:
6:08:43 PM: /tmp/quarto/share/filters/quarto-pre/quarto-pre.lua:2943: in function 'callShortcodeHandler'
6:08:43 PM: /tmp/quarto/share/filters/quarto-pre/quarto-pre.lua:3024: in function 'transformShortcodeInlines'

It seems there is an error produced by the lua while running the extension and the traceback seems to relate to the shortcodes.

I am using the following code in the _quarto.yml to put fa icons in the navbar. Could that be the issue?

    left:
     - text: "{{< fa virus >}} Monkeypox"
        href: monkeypox.qmd

I noticed the rendered examples are published on gh-pages but there isn't any CI allowing the files to be properly updated on code changes in main.
Should we (I) add something like:

on:
  push:
    branches: main

name: Quarto render examples

jobs:
  render-example:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v3
      - uses: quarto-dev/quarto-actions/setup@v2
      - name: Render and Publish
        uses: quarto-dev/quarto-actions/publish@v2
        with:
          GITHUB_USERNAME: ${{ github.actor }}
          GITHUB_EMAIL: ${{ github.actor }}@users.noreply.github.com
          target: gh-pages
          path: example.qmd
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Some fontawesome icons appear in two styles, one of which is called "regular", and takes a [regular] optional argument in LaTeX. For example, \faIcon{square} is a filled square, whereas \faIcon[regular]{square} is an empty square. In HTML the two are differentiated by the class "far" vs "fas".

I searched through the documentation of this extension, but I don't find how to access these variants. Following the example of the size specification I tried adding style="regular" or regular=true and various other combinations. I was wondering if it is possible to access these variants and how.

Thank you so much for this awesome extension, it makes a world of difference!

I'm not sure if this is an issue with this extension specifically or an issue with Quarto v1.2's handling of external HTML resources.

When using Quarto v1.1.251, the path to the font files that is generated in all.css (site_libs/quarto-contrib/fontawesome6-0.1.0/all.css) correctly references the files that are placed in the webfonts directory one level back:

@font-face {
  font-family: 'Font Awesome 6 Free';
  ...
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }

When using Quarto v1.2.134 (and earlier iterations of v1.2), the path does not include ../webfonts/, which makes the fonts fail to load in the browser:

@font-face {
  font-family: 'Font Awesome 6 Free';
  ...
  src: url("fa-regular-400.woff2") format("woff2"), url("fa-regular-400.ttf") format("truetype"); }

Error running filter C:/Program Files/Quarto/share/filters/quarto-pre/quarto-pre.lua:
_extensions/quarto-ext/fontawesome/fontawesome.lua:56: attempt to call a nil value (field 'is_format')
stack traceback:
...ram Files/Quarto/share/filters/quarto-pre/quarto-pre.lua:2943: in function 'callShortcodeHandler'
...ram Files/Quarto/share/filters/quarto-pre/quarto-pre.lua:3024: in function 'transformShortcodeInlines'

reprex follows

---
title: "A"
subtitle: "B"
author: "C"
institute: "D"
format: 
  revealjs:
    theme:
      - moon
    self-contained: true
from: markdown+emoji
---

## [Thank you]{style="font-weight:500"}

{{< fa envelope >}} [[email protected]](mailto:[email protected])

 

{{< fa brands github >}} [https://github.com](username)

 

{{< fa brands linkedin >}} [https://linkedin.com](handle)

Hi team,

Thanks for this package, it has a lot of icons that I want that bootstrap doesn't include. Now that I've added some to my nav bar I notice they are smaller than the bootstrap icons, and I can't find a neat way to resize just those icons (although my css style knowledge is nonexistent).

Is adding support for icon sizes (https://fontawesome.com/docs/web/style/size) on the cards/consistent with the aims of the extension? Or is there a better alternative I'm unaware of?

I think it could be parsed in a very similar way as to what you just added for fa-brands, and I'd be willing to take a crack at a pull-request as long as I know the functionality is actually desired.

The only technical challenge I see is figuring out whether a two-argument shortcode contains a group and icon, or an icon and scale, but I think it would be easy to write regex to detect a scale.

Hi, thanks for this great Quarto extension. It would be nice if we could add a color argument like so:

{{< fa brands r-project color=steelblue >}}

This has been implemented in https://github.com/schochastics/academicons and seems to work when adding the necessary lines to the lua filter for this extension. I'm happy to submit a PR to do that if you all think this is something worth adding.

Thanks!

How do I make the icons clickable? I searched the guide but could find an answer.

Thank you.

Kia ora/hello from New Zealand.

I tried installing this and making it work with Quarto RevealJS. I found this thread and tried all of the options provided.

If I do this

```{mermaid}
%%| fig-width: 15
%%| fig-height: 5
flowchart LR
  A[{{< fa brands github size=5x >}}"Session :one:"] --> B{Decision}
  B --> C[just observe]
  B --> D[get involved]
  C --> E[get an overivew and hear buzzwords]
  D --> F[get hands-on experience]

I get (where the last bullet point reflects the use of an icon, but the mermaid doesn't render at all)

And this solutions doesn't work at all.

Any advice on how to get better logs is highly appreciated.

Cheers
Jens

I'm using the latest dev version of quarto-cli. The fontawesome extension was working fine with self-contained: true but looks to have recently stopped working:

---
title: "Self contained true"
format: 
  html:
    self-contained: true
---

{{< fa thumbs-up >}}
{{< fa folder >}}
{{< fa chess-pawn >}}
{{< fa brands bluetooth >}}
{{< fa brands twitter size=2xl >}}
{{< fa brands github size=5x >}}
{{< fa battery-half size=Huge >}}
{{< fa envelope title="An envelope" >}}

Self-contained false still works fine:

When trying to run a Quarto html document with the extension, I get the error.

output file: cv.knit.md

Error running filter C:/Users/Sarmiento/AppData/Local/Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:
_extensions/quarto-ext/fontawesome/fontawesome.lua:56: attempt to call a nil value (field 'is_format')
stack traceback:
.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:2943: in function 'callShortcodeHandler'
.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:3024: in function 'transformShortcodeInlines'
.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:2833: in function <.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:2827>
[C]: in function 'string.gsub'
.../Programs/Quarto/share/filters/quarto-pre/quarto-pre.lua:2827: in function 'transformShortcodeCode'

So you know how can I fix this error? or is it related to the extension itself?

Is it possible to specify the colour for the FontAwesome icon? It would also be cool if it would be possible to use the Bootstrap primary color by default or at least make that an option as well as custom colors (like "red").