Icons

Use out-of-the-box Font Awesome icons to style your website.

Hinode provides out-of-the box access to the free icons of Font Awesome. The shortcodes fa, fab, and fas are available to add these icons with as limited code as possible. The Font Awesome icon library provides various styling options. The below paragraphs illustrate how to apply the styling options compatible with Markdown, Bootstrap, and the content security policy.

Styling basics

The Font Awesome icon library provides access to more than 2.000 free and open-source icons. Simply search for a keyword and review the presented options. For example, searching for the keyword music and filtering for free returns a list of nearly 30 icons. Use one of the following three shortcodes to add an icon to your Markdown content:

• fa - regular Font Awesome icon library
• fab - brands Font Awesome icon library
• fas - solid Font Awesome icon library

Specify the correct icon library and omit the fa- prefix from the icon name to insert an icon.

{{< fas music >}}

The icons inherit the current styling options and as such blend in with text inline. For example, apply the theme color text-primary of the outer HTML element span to change the color of the icon. You can also pass the class attribute directly to the shortcode, such as text-info.

<span class="text-primary">
    {{< fas music >}}
</span>
{{< fas music text-info >}}

Sizing icons

Font Awesome supports both relative and absolute sizing. The following two section explain how to apply the sizing to an icon.

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 illustrative the available relative sizes.

<p>{{< fas coffee fa-2xs >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p>{{< fas coffee fa-xs >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p>{{< fas coffee fa-sm >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p>{{< fas coffee fa >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p>{{< fas coffee fa-lg >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p>{{< fas coffee fa-xl >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p>{{< fas coffee fa-2xl >}} When my six o’clock alarm buzzes, I require a pot of good java.</p>

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 illustrative the various absolute sizes.

{{< fas camera fa-1x >}}
{{< fas camera fa-2x >}}
{{< fas camera fa-3x >}}
{{< fas camera fa-4x >}}
{{< fas camera fa-5x >}}
{{< fas camera fa-6x >}}
{{< fas camera fa-7x >}}
{{< fas camera fa-8x >}}
{{< fas camera fa-9x >}}
{{< fas camera 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. Wrap the icon in an element with class fa-wrapper and add the class attribute fa-fluid to the icon itself. The icon is now dynamically resized. The following example demonstrates a centered, responsive icon. As Hinode includes Font Awesome as a web font, the wrapper element may have some whitespace. Use text-center to center the icon within the container, and mx-auto to center the container itself.

<div class="fa-wrapper col-6 mx-auto text-center">
    {{< fas rocket bg-body-tertiary fa-fluid >}}
</div>

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.

<div class="fa-3x">
    <div>{{< fas skating fa-fw bg-body-tertiary >}} Skating</div>
    <div>{{< fas skiing fa-fw bg-body-tertiary >}} Skiing</div>
    <div>{{< fas skiing-nordic fa-fw bg-body-tertiary >}} Nordic Skiing</div>
    <div>{{< fas snowboarding fa-fw bg-body-tertiary >}} Snowboarding</div>
    <div>{{< fas snowplow fa-fw bg-body-tertiary >}} Snowplow</div>
</div>

Lists

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

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

Rotating icons

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

<div class="fa-3x">
    {{< fas snowboarding >}}
    {{< fas snowboarding fa-rotate-90 >}}
    {{< fas snowboarding fa-rotate-180 >}}
    {{< fas snowboarding fa-rotate-270 >}}
    {{< fas snowboarding fa-flip-horizontal >}}
    {{< fas snowboarding fa-flip-vertical >}}
    {{< fas snowboarding fa-flip-both >}}
</div>

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.

<div class="fa-3x">
    {{< fas heart fa-beat >}}
    {{< fas triangle-exclamation fa-fade >}}
    {{< fas circle-info fa-beat-fade >}}
    {{< fas basketball fa-bounce >}}
    {{< fas camera-rotate fa-flip >}}
    {{< fas bell fa-shake >}}
    {{< fas sync fa-spin >}}
</div>

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.

{{< fas quote-left fa-2x fa-pull-left >}}
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.

<span class="fa-stack fa-2x">
    {{< fas square fa-stack-2x >}}
    {{< fab twitter fa-stack-1x fa-inverse >}}
</span>
<span class="fa-stack fa-2x">
    {{< fas circle fa-stack-2x >}}
    {{< fas flag fa-stack-1x fa-inverse >}}
</span>
<span class="fa-stack fa-2x">
    {{< fas camera fa-stack-1x >}}
    {{< fas ban fa-stack-2x text-danger >}}
</span>
<span class="fa-stack fa-4x">
    {{< fas square fa-stack-2x >}}
    {{< fas terminal fa-stack-1x fa-inverse >}}
</span>

The following table describes the available classes.