Icon
Use the icon shortcode to add a Font Awesome icon with ease.
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.
{{< icon fa square-check >}}
{{< fa square-check >}}
{{< fab linkedin >}}
{{< fas circle-check >}}
{{< icon custom activity >}}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
|
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | 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. |
||
| spacing | bool | true |
v0.21.0
|
|
| src | string |
v0.22.0
.svg) file to use instead of a Font Awesome icon. The file is dynamically loaded and supports styling options similar to a regular Font Awesome icon. |
||
| style | string | 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
fa-wrapper and fa-fluid attributes by default. |
See the icons documentation in the content section for additional styling options.