How to add font icons from Font Awesome

Font Awesome provides vector icons and social logos for your website. This is one of our favorite web design resources. Learn more at https://fontawesome.com

There are two parts to adding icons from Font Awesome.

1. Link your website to Font Awesome:

Launch Hazel Pro
Open any page
Go to Settings > Page Properties
Check "Custom Header Code"
To link the entire website, paste the linking code into "Custom Header Code - Site Level"
To link a single page at a time, paste the linking code into "Custom Header Code"

2. Add Font Awesome icons:
You can add icons into any text box or HTML snippet box. Test for icons using "Preview" mode.
Maple leaf:
Upward arrow:

Change icon color and size:
When adding icons into a text box, you can customize the color of icons by changing the "Text color" of the icon code.
Include a code modifier such as "fa-3x" to customize icon size (i.e. fa-3x, fa-4x, fa-5x, etc)