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.