Icon

The icon shortcode allows you to easily embed Font Awesome SVG icons inline within your markdown content.

Basic Usage #

Using Positional Parameters (Recommended) #

{{< icon "github" >}}
{{< icon "heart" "solid" >}}
{{< icon "envelope" "regular" "custom-class" >}}

Using Named Parameters #

{{< icon name="github" style="brands" >}}
{{< icon name="heart" style="solid" class="text-lg" >}}
{{< icon name="twitter" style="brands" ariaLabel="Twitter Profile" >}}

Supported Parameters #

Examples #

Social Media Icons #

Using brand icons for social media:

{{< icon “github” “brands” >}} GitHub
{{< icon “twitter” “brands” >}} Twitter
{{< icon “linkedin” “brands” >}} LinkedIn
{{< icon “youtube” “brands” >}} YouTube

Output:

GitHub
Twitter
LinkedIn
YouTube

Solid Icons (Default) #

Standard solid icons (style defaults to “solid”):

{{< icon “heart” >}} Favorite
{{< icon “star” >}} Rating
{{< icon “check” >}} Completed
{{< icon “envelope” >}} Email

Output:

Favorite
Rating
Completed
Email

Regular Style Icons #

Using the regular (outline) style:

{{< icon “heart” “regular” >}} Like
{{< icon “star” “regular” >}} Bookmark
{{< icon “circle” “regular” >}} Indicator

Output:

Like
Bookmark
Indicator

With Custom Classes #

Add custom CSS classes for styling:

{{< icon name=“heart” style=“solid” class=“text-red” >}}
{{< icon name=“star” style=“solid” class=“text-yellow” >}}

With Accessibility Labels #

Provide meaningful labels for screen readers:

{{< icon name=“github” style=“brands” ariaLabel=“Visit our GitHub repository” >}}
{{< icon name=“envelope” ariaLabel=“Send us an email” >}}

How It Works #

1. Icon Fetching: The shortcode fetches SVG icons from the Font Awesome CDN (https://raw.githubusercontent.com/FortAwesome/Font-Awesome/)
2. Inline SVG: Icons are embedded as inline SVGs in your HTML output
3. Accessibility: Each icon includes proper aria-label and role="img" attributes
4. Fallback: If an icon fails to load, a text fallback [icon-name] is displayed with a warning
5. CSS Classes: Icons automatically get .icon and .icon-{name} classes, plus any custom classes you specify

Icon Styles #

Font Awesome provides three main styles:

• solid (default): Filled icons, the most commonly used style
• regular: Outline/line icons, lighter weight
• brands: Brand and logo icons (GitHub, Twitter, etc.)

Finding Icons #

Browse the complete Font Awesome icon library at fontawesome.com/icons to find icon names and check which styles are available for each icon.

CSS Customization #

Icons receive the following CSS classes:

• .icon - Base class for all icons
• .icon-{name} - Specific class for the icon name (e.g., .icon-github)
• Any custom classes you specify via the class parameter

You can style icons using these classes in your custom CSS:

.icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.icon-github {
  color: #333;
}

.text-red .icon {
  color: red;
}