Icons
Add inline SVG icons using {{< icon >}} shortcode.
This is shortcode implementation of icons, if you are looking for the partial version, check Icons documentation.
Features#
- Adds Inline Font Awesome SVGs.
- Adds accessible attributes (
role="img"andaria-label) for screen readers.
Parameters#
- name#
- (required) Font Awesome icon filename (e.g.
github,lightbulb,circle-info). - style#
- (optional)
solid|regular|brands(default:solid). - class#
- (optional) Additional CSS classes to append to the SVG.
- ariaLabel#
- (optional) Accessible label for screen readers (defaults to the icon
name).
Icons are fetched from Font Awesome free catalog. Check below links for supported icons in each style:
Syntax#
markdown
{{< icon
name="github"
style="brands"
class="my-icon"
ariaLabel="GitHub profile"
>}}Examples#
Below is a quick reference table showing common icon shortcodes and their rendered output.
| code | icon |
|---|---|
{{< icon name="lightbulb" >}} | |
{{< icon name="heart" class="text-danger" >}} | |
{{< icon name="envelope" style="regular" ariaLabel="Email" >}} | |
{{< icon name="github" style="brands" ariaLabel="GitHub" >}} | |
{{< icon name="twitter" style="brands" ariaLabel="Twitter" >}} |