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 >}}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 | 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 Flag to add a trailing whitespace character to optimize inline rendering. | |
| src | string |
v0.22.0
Path to a scalable vector graphics (.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
Class attributes of the wrapper element. The wrapper adds the fa-wrapper and fa-fluid attributes by default. |
| Name | Type | Required | Default |
|---|---|---|---|
| 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 Flag to add a trailing whitespace character to optimize inline rendering. | |||
| src | string | ||
v0.22.0
Path to a scalable vector graphics (.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
Class attributes of the wrapper element. The wrapper adds the fa-wrapper and fa-fluid attributes by default. |
|||
See the Icons Documentation in the content section for additional styling options.