Use Font Awesome Icons In A Freeform Block

Learn how to add or update a Font Awesome icon. This is how we added icons to your website.

Add HTML Code to Freeform Block

1. Open the Freeform Block.
2. Click on the Source icon.
3. Paste this HTML code into the Freeform Block:

<p style="text-align:center"><em aria-hidden="true" aria-label="DISC Assessment" class="fa-3x fa-expand-arrows-alt fas">&nbsp;</em>

</p>

<h3 style="text-align:center"><a href="#">DISC Assessment</a>

</h3>

The highlighted text above are the pieces of the code that you will change out, based on what your content needs are.

Find Icon(s) and Update Code

1. In a new browser tab, visit the Font Awesome website (this link is prefiltered to the free options).
2. Choose the icon you would like added to your site.
3. When you arrive on the icon detail page, the HTML code will appear above the icon: 
4. Copy the highlighted section only.
5. Paste this AFTER the “fa-3x” in the original code.
   1. Note: The “fa-3x” determines the size of the icon.
6. Click Save and Publish.

Aria Label

• This is what is available to screen readers and it should match what the icon is trying to convey.  
• When updating the content, make sure you maintain the double quotes on either side of the text.

Font Awesome Code

Each Font Awesome icon has HTML code.  The “fa-home fas” is specific to an icon for a house, for example.

Content Description

In the example above, the <p> tag represent the header that exists under the icon.  You can change “Home health and personal care” to whatever text makes sense for what you are creating. 

If you opt not to have this section, you will need to delete this in its entirety:

<p style="text-align:center">DISC Assessment

</p>