Icon

Overview  

Hinode includes support for Font Awesome  by default. This library provides both a free icon set, as well as utility functions to modify the appearance. You can also provide custom icons in the svg format. Use the icon shortcode to quickly add a Font Awesome or custom icon to your content. You can also use fa for regular icons, fab for brand icons, and fas for solid icons.

Relative Sizing  

Font Awesome includes a range of t-shirt based sizes that are relative to the browser’s default font size of 16px. The icons align to the inline text. The following example illustrates the available relative sizes.

{{< fas mug-saucer fa-2xs >}} When my six o’clock alarm buzzes, I require a pot of good java.

{{< fas mug-saucer fa-xs >}} When my six o’clock alarm buzzes, I require a pot of good java.

{{< fas mug-saucer fa-sm >}} When my six o’clock alarm buzzes, I require a pot of good java.

{{< fas mug-saucer fa-md >}} When my six o’clock alarm buzzes, I require a pot of good java.

{{< fas mug-saucer fa-lg >}} When my six o’clock alarm buzzes, I require a pot of good java.

{{< fas mug-saucer fa-xl >}} When my six o’clock alarm buzzes, I require a pot of good java.

{{< fas mug-saucer fa-2xl >}} When my six o’clock alarm buzzes, I require a pot of good java.

The table below illustrates the relative sizing classes and their equivalent relative and absolute font size.

Absolute Sizing  

Font Awesome also supports absolute sizing on a scale of 1x to 10x. The icons do not necessarily align to their surrounding text. The following example illustrates the various absolute sizes.

{{< fas star fa-1x >}}
{{< fas star fa-2x >}}
{{< fas star fa-3x >}}
{{< fas star fa-4x >}}
{{< fas star fa-5x >}}
{{< fas star fa-6x >}}
{{< fas star fa-7x >}}
{{< fas star fa-8x >}}
{{< fas star fa-9x >}}
{{< fas star fa-10x >}}

The table below illustrates the absolute sizing classes and their equivalent font size.

Responsive Sizing  

Hinode supports responsive sizing of icons using so-called containers. Add fa-fluid as attribute to the icon class and add fa-wrapper to the wrapper. The icon will scale to fill the available space.

  Note

• Font Awesome v7  introduced several changes to the icons and stylesheets. You may experience some subtle differences regarding whitespace and positioning compared to older versions.
• Container support is a relatively new CSS feature that is not supported by all browsers yet. See this browser compatibility overview  to check the current browser support. Hinode uses a fixed-size icon with a font-size of 5rem as fallback.

The following example demonstrates a centered, responsive icon. The icon keeps its original aspect ratio, so the wrapper may have some whitespace. Use mx-auto to center the container.

{{< fas icon="rocket bg-body-tertiary fa-fluid" wrapper="col-3 fa-wrapper mx-auto" >}}

Fixed Width  

Add fa-fw to the class of the HTML element referencing your icon to apply a fixed width. This ensures icons of varying icon width are properly aligned to each other. The following example illustrates how this works.

{{< fas person-skating fa-fw bg-body-tertiary >}} Skating
{.fa-3x}

{{< fas person-skiing fa-fw bg-body-tertiary >}} Skiing
{.fa-3x}

{{< fas person-skiing-nordic fa-fw bg-body-tertiary >}} Nordic Skiing
{.fa-3x}

{{< fas person-snowboarding fa-fw bg-body-tertiary >}} Snowboarding
{.fa-3x}

{{< fas snowplow fa-fw bg-body-tertiary >}} Snowplow
{.fa-3x}

Lists  

Use the classes .fa-ul and .fa-li to replace default bullets in unordered lists. The following example illustrates how this works.

- {{< fas icon="circle-check" wrapper="fa-li" >}}List icons can
- {{< fas icon="square-check" wrapper="fa-li" >}}be used to
- {{< fas icon="spinner fa-pulse" wrapper="fa-li" >}} replace bullets
- {{< fa icon="square" wrapper="fa-li" >}} in lists
{.fa-ul}

Rotating Icons  

Use specific classes to rotate the icon with a specific degree. The following example illustrates how this works.

{{< fas person-snowboarding fa-3x >}}
{{< fas person-snowboarding fa-3x fa-rotate-90 >}}
{{< fas person-snowboarding fa-3x fa-rotate-180 >}}
{{< fas person-snowboarding fa-3x fa-rotate-270 >}}
{{< fas person-snowboarding fa-3x fa-flip-horizontal >}}
{{< fas person-snowboarding fa-3x fa-flip-vertical >}}
{{< fas person-snowboarding fa-3x fa-flip-both >}}

The following classes are available:

Animating Icons  

Font Awesome supports various animations by simply adding a animation class to the HTML element. The following example illustrates the available basic animations. Add custom styles to your Sass files to apply additional animation utilities  .

{{< fas heart fa-3x fa-beat >}}
{{< fas triangle-exclamation fa-3x fa-fade >}}
{{< fas circle-info fa-3x fa-beat-fade >}}
{{< fas basketball fa-3x fa-bounce >}}
{{< fas camera-rotate fa-3x fa-flip >}}
{{< fas bell fa-3x fa-shake >}}
{{< fas arrows-rotate fa-3x fa-spin >}}

The following table describes the available basic animation classes.

Bordered and Pulled Icons  

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons. The following example illustrates a quote.

{{< icon icon="fas quote-left fa-2x fa-pull-left" spacing=false >}}
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

The following table describes the available classes.

Stacking Icons  

Use the fa-stack class on the parent HTML element of the two icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect. Add a theme color such as text-primary to change the color of the icon. The following example illustrates the available options.

{{< fas square fa-stack-2x >}}
{{< fab x-twitter fa-stack-1x fa-inverse >}}
{.fa-stack .fa-2x}

{{< fas circle fa-stack-2x >}}
{{< fas flag fa-stack-1x fa-inverse >}}
{.fa-stack .fa-2x}

{{< fas camera fa-stack-1x >}}
{{< fas ban fa-stack-2x text-danger >}}
{.fa-stack .fa-2x}

{{< fas square fa-stack-2x >}}
{{< fas terminal fa-stack-1x fa-inverse >}}
{.fa-stack .fa-4x}

The following table describes the available classes.

Specifying an Icon Family  

Hinode provides support for multiple icon providers since release v2.0.0  . All icons are compatible with Font Awesome  styling. The following providers are available:

• Bootstrap Icons  - import mod-bootstrap-icons 
• Flat Icon  - import mod-flaticon  (private module, license required)
• Font Awesome  - import mod-fontawesome  (imported by default)

Many providers offer multiple icon sets and styles. For example, Font Awesome supports the following styles:

• fa and far - regular style
• fab - brands
• fas - solid

You can configure a default style by setting defaultFamily in your site parameters:

[modules.fontawesome]
  defaultFamily = "bi"

The icon shortcode uses the default value when no family is provided. The following shortcodes are all equivalent:

{{< icon heart >}}

{{< icon bi heart >}}

{{< bi heart >}}

Adding Custom Icons  

  Note

Hinode removes any embedded height and width attributes from the icon data to ensure the icon is responsive. The viewBox attribute is kept.

You can reference a custom family and icon stored in the local assets folder. The icon shortcode uses the path assets/svgs/{family}/{icon}.svg, replacing {family} and {icon} with the specified values. You can mix the custom icon with Font Awesome styling directives (such as fa-4x, although animations are typically not supported). The following example shows an icon called activity of the custom family of size fa-4x.

{{< icon custom activity fa-4x >}}

Configuration  

  Important

Webfonts (inline = false) require Dart Sass  to function correctly. See the Hugo documentation  for installation instructions.

The Font Awesome module  supports the following site parameters (using params.modules in config.toml or hugo.toml):

Arguments  

  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.