Skip to content

Commit

Permalink
various improvements:
Browse files Browse the repository at this point in the history
- support for brands
- improved README and example
  • Loading branch information
jjallaire committed Jul 10, 2022
1 parent 42d9a87 commit bb9eaa8
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 11 deletions.
31 changes: 24 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Font Awesome Extension for Quarto

This extension allows you to use [Font Awesome](https://fontawesome.com/) icons in your quarto documents.
This extension provides support including free icons provided by [Font Awesome](https://fontawesome.com). Icons can be used in both HTML (via [Font Awesome 6 Free](https://fontawesome.com/search?m=free)) and PDF (via the [fontawesome5 LaTeX package](https://ctan.org/pkg/fontawesome5?lang=en)).

## Installing

Expand All @@ -13,19 +13,36 @@ If you're using version control, you will want to check in this directory.

## Using

The extension provides the `fa` shortcode. For example:
To embed an icon, use the `{{{< fa >}}}` shortcode. For example:

```
{{< fa thumbs-up >}}
{{< fa folder >}}
{{< fa chess-pawn }}
{{{< fa brands bluetooth }}}
```

Here is the source code for a minimal example: [example.qmd](example.qmd)
This extension includes support for only free Font Awesome icons (there are roughly 2,000 free icons, while the complete set of Pro icons consists of more than 16,000). You can browse all of the available free icons here:

This is the output of `example.qmd` for [HTML](https://quarto-ext.github.io/fontawesome/) and [PDF](https://quarto-ext.github.io/fontawesome/example.pdf).
<https://fontawesome.com/search?m=free>

### Brands

Note that there is a `brands` prefix used within the `bluetooth` example above. If you choose an icon from the `brands` collection, you will need to add a `brands` collection specifier. For example, if you search the free icons for "github" and then click on the `github` icon, you'll see this as the suggested HTML to embed the icon:

```html
<i class="fa-brands fa-github"></i>
```

The `fa-brands` indicates that the icon is in the `brands` collection. To use this with Quarto just add the `brands` collection prefix as follows:

# Known Issues
```default
{{{< fa brands github }}}
```

## Example

Here is the source code for a minimal example: [example.qmd](example.qmd)

This is the output of `example.qmd` for [HTML](https://quarto-ext.github.io/fontawesome/) and [PDF](https://quarto-ext.github.io/fontawesome/example.pdf).

* The PDF format uses fontawesome5, while the HTML format uses fontawesome6.
* No additional styling or formatting options
7 changes: 6 additions & 1 deletion _extensions/fontawesome/fontawesome.lua
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ end
return {
["fa"] = function(args, kwargs)

local group = "solid"
local icon = pandoc.utils.stringify(args[1])
if #args > 1 then
group = icon
icon = pandoc.utils.stringify(args[2])
end

-- detect html (excluding epub which won't handle fa)
if quarto.doc.isFormat("html:js") then
ensureHtmlDeps()
return pandoc.RawInline('html', "<i class=\"fa-solid fa-" .. icon .. "\"></i>")
return pandoc.RawInline('html', "<i class=\"fa-" .. group .. " fa-" .. icon .. "\"></i>")
-- detect pdf / beamer / latex / etc
elseif quarto.doc.isFormat("pdf") then
ensureLatexDeps()
Expand Down
12 changes: 9 additions & 3 deletions example.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ format:
pdf: default
---

This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides a shortcode `fa`:
This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides an `{{{< fa >}}}` shortcode:

```markdown
``` markdown
{{{< fa icon-name >}}}
```

For example, use `{{{< fa thumbs-up >}}}` to get {{< fa thumbs-up >}}, or `{{{< fa folder >}}}` to get {{< fa folder >}}.
For example:

| Shortcode | Icon |
|---------------------------------|-----------------------------|
| `{{{< fa thumbs-up >}}}` | {{< fa thumbs-up >}} |
| `{{{< fa folder >}}}` | {{< fa folder >}} |
| `{{{< fa chess-pawn >}}}` | {{< fa chess-pawn >}} |
| `{{{< fa brands bluetooth >}}}` | {{< fa brands bluetooth >}} |

0 comments on commit bb9eaa8

Please sign in to comment.