Font Awesome Quarto Extension
This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides an {{< fa >}} shortcode:
Mandatory
<icon-name>:{{< fa <icon-name> >}}Optional
<group>,<size=...>,<title=...>and<label = ...>:{{< fa <group> <icon-name> <size=...> <title=...> <label=...>}}groupdefaults tosolid.sizeusage is detailed in https://github.com/quarto-ext/fontawesome#sizing-iconstitleis used only in HTML format to set thetitleattribute on the<i>element.labelis used only in HTML format to setaria-labelattribute. If unset, theicon-nameis used.
For example:
| Shortcode | Icon |
|---|---|
{{< fa thumbs-up >}} |
|
{{< fa solid thumbs-up >}} |
|
{{< fa regular thumbs-up >}} |
|
{{< fa folder >}} |
|
{{< fa regular folder >}} |
|
{{< fa heart >}} |
|
{{< fa regular heart >}} |
|
{{< 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" >}} |
|
{{< fa envelope title="An envelope" label="custom aria-label" >}} (HTML only) |
Note that the icon sets are currently not perfectly interchangeable across formats:
htmluses FontAwesome 6.7.2 from <https://github.com/FortAwesome/Font-Awesomepdfuses thefontawesome6package, based on FontAwesome 6.7.2 too.- Other formats are currently not supported, but PRs are always welcome!
Available Icons Reference
Below is a comprehensive list of available Font Awesome 6.7.2 icons organized by category.
Solid Icons (Default)
These icons work without specifying a group:
| Icon | Name | Icon | Name | Icon | Name |
|---|---|---|---|---|---|
house |
heart |
star |
|||
user |
check |
xmark |
|||
magnifying-glass |
envelope |
phone |
|||
calendar |
clock |
location-dot |
|||
camera |
file |
folder |
|||
trash |
download |
upload |
|||
pencil |
pen |
print |
|||
share |
link |
lock |
|||
bell |
gear |
wrench |
|||
plus |
minus |
circle-info |
|||
circle-question |
triangle-exclamation |
ban |
|||
thumbs-up |
thumbs-down |
comment |
|||
book |
bookmark |
flag |
|||
globe |
cloud |
fire |
|||
bolt |
sun |
moon |
|||
music |
image |
video |
|||
shopping-cart |
credit-card |
gift |
|||
truck |
plane |
car |
|||
laptop |
mobile |
tablet |
|||
database |
server |
wifi |
User & People
| Icon | Name | Icon | Name | Icon | Name |
|---|---|---|---|---|---|
user |
users |
user-plus |
|||
user-minus |
user-check |
user-xmark |
|||
user-gear |
user-tie |
user-group |
|||
user-graduate |
user-doctor |
user-nurse |
Charts & Data
| Icon | Name | Icon | Name | Icon | Name |
|---|---|---|---|---|---|
chart-line |
chart-bar |
chart-pie |
|||
chart-area |
chart-column |
chart-simple |
Tech & Code
| Icon | Name | Icon | Name | Icon | Name |
|---|---|---|---|---|---|
code |
terminal |
bug |
|||
laptop-code |
code-branch |
code-commit |
|||
code-merge |
code-pull-request |
cube |
Brands (use brands group)
| Icon | Name | Icon | Name | Icon | Name |
|---|---|---|---|---|---|
github |
gitlab |
twitter |
|||
facebook |
linkedin |
youtube |
|||
instagram |
reddit |
discord |
|||
slack |
python |
java |
|||
js |
react |
node-js |
|||
docker |
apple |
windows |
|||
linux |
android |
chrome |
|||
firefox |
microsoft |
google |
Complete Icon List
For a complete searchable list of all 2,000+ icons, visit the Font Awesome Icon Gallery.
Usage tips:
- Most icons work without a group prefix:
{{< fa icon-name >}} - Brand icons require the
brandsgroup:{{< fa brands icon-name >}} - Regular icons can use the
regulargroup:{{< fa regular icon-name >}} - Solid icons (default) can optionally use
solidgroup:{{< fa solid icon-name >}}