Font Awesome Cheatsheet

This post serves as my notebook for using Font Awesome icons on this blog (or any other rendered by Hugo engine). Get aclassfrom Font Awesome website and use it as follows

:(fa-solid fa-house):
:(fas fa-clock):

which renders as  

Sizing

FA provides list of standard sizes. Not only do these classes scale icons up or down but also provide appropriate vertical alignment. The following is the list of standard relative sizes provided by the library

In addition to relative sizes, also literal sizes are available

Animation

There are couple of animations built-in FA library. For more info follow here

Beat animation

Beat animation allows to draw attentions to a “living” object. Employfa-beatto use it

:(fa-solid fa-heart fa-beat):
:(fa-solid fa-clock fa-beat):

which renders as  

In order to obtain more control on animation one must use HTML syntax

<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Spin animation

One of the most useful animations is a spin effect that is wrapped infa-spinclass:

:(fa-solid fa-sync fa-spin):
:(fa-solid fa-circle-notch fa-spin):

which render as  

More advanced examples can be obtained as follows

<div class="fa-3x">
  <i class="fa-solid fa-sync fa-spin"></i>
  <i class="fa-solid fa-circle-notch fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
</div>

List of free icons

Sources

• FontAwesome free icons list generator