Docs
Icon
Posted on August 14, 2024 (Last modified on June 20, 2025) • 4 min read • 811 wordsUse the icon shortcode to add a Font Awesome icon with ease.
Overview
Use the icon shortcode to quickly add a Font Awesome icon to your content. You can also use fa for regular icons, fab for brand icons, and fas for solid icons. As an example, the following shortcodes show a square check, a brand logo, a circle check, and a custom icon.
markdown
{{< icon fa square-check >}}
{{< fa square-check >}}
{{< fab linkedin >}}
{{< fas circle-check >}}
{{< icon custom activity >}}Arguments
Important
When using Inline Vector Icons, be sure to use the main name of the icon. The shortcode does not recognize the aliases of the icons and will throw an error or warning. For example, use
{{< fas house >}}instead of{{< fas home >}}to add a house icon.
The shortcode supports both unnamed arguments and named arguments. When using unnamed arguments, all attributes are mapped to the class argument, separated by spaces.
| Argument | Required | Description |
|---|---|---|
| class | Yes | Family, name, and styling of the icon to display. The shortcode expects the following format and order: {family} {name} {style attributes}. The shortcode supports the default families of the free version of Font Awesome, including shorthand notation: “fa-solid” (“fas”), “fa-regular” (“fa”), “fa-brands” (“fab”). You can omit the fa- prefix of the icon name. Alternatively, you can reference a custom family and icon stored in assets/svgs/{family}/{icon}.svg. |
| style | No | Optional custom style of the icon, e.g. --fa-animation-duration: 2s;. Hinode disables inline styles by default, review the
Content Security Policy for more details. |
| spacing | No | v0.21.0 Optional flag to add a trailing whitespace character to optimize inline rendering, defaults to “true”. |
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string |
v1.0.0
Use icon instead. Family, name, and styling of the icon to display. The shortcode expects the following format and order: {family} {name} {style attributes}. The shortcode supports the default families of the free version of Font Awesome, including shorthand notation: fa-solid (fas), fa-regular (fa), fa-brands (fab). You can omit the fa- prefix of the icon name. When using fhe shortcodes fa.html, fab.html, and fas.html, you can omit the family name. Alternatively, you can reference a custom family and icon stored in assets/svgs/{family}/{icon}.svg. |
||
| icon | string | Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension. |
||
| inline-style | string | Custom style of the element, e.g. --fa-animation-duration: 2s;. Please note that Hinode disables inline styles by default, review the Content Security Policy for more details. |
||
| spacing | bool | true |
v0.21.0 Flag to add spacing to the inline element. | |
| src | string, template.URL |
v0.22.0
Path or url of the image, e.g. img/example.jpg. Images with multiple color modes are expected to have a basename that ends with either -dark or -light. |
||
| style | string |
v1.0.0
Use inline-style instead. Custom style of the icon, e.g. --fa-animation-duration: 2s;. Please note that Hinode disables inline styles by default, review the Content Security Policy for more details. |
||
| wrapper | string |
v0.19.0
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
v1.0.0
Use icon instead. Family, name, and styling of the icon to display. The shortcode expects the following format and order: {family} {name} {style attributes}. The shortcode supports the default families of the free version of Font Awesome, including shorthand notation: fa-solid (fas), fa-regular (fa), fa-brands (fab). You can omit the fa- prefix of the icon name. When using fhe shortcodes fa.html, fab.html, and fas.html, you can omit the family name. Alternatively, you can reference a custom family and icon stored in assets/svgs/{family}/{icon}.svg. |
|||
| icon | string | ||
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension. |
|||
| inline-style | string | ||
Custom style of the element, e.g. --fa-animation-duration: 2s;. Please note that Hinode disables inline styles by default, review the Content Security Policy for more details. |
|||
| spacing | bool | true |
|
| v0.21.0 Flag to add spacing to the inline element. | |||
| src | string, template.URL | ||
v0.22.0
Path or url of the image, e.g. img/example.jpg. Images with multiple color modes are expected to have a basename that ends with either -dark or -light. |
|||
| style | string | ||
v1.0.0
Use inline-style instead. Custom style of the icon, e.g. --fa-animation-duration: 2s;. Please note that Hinode disables inline styles by default, review the Content Security Policy for more details. |
|||
| wrapper | string | ||
v0.19.0
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default. |
|||
Remarks
See the Icons Documentation in the content section for additional styling options.