Skip to content

Beyond the Basics: Font Awesome Icons

 

An introduction to Font Awesome icons

Font Awesome icons are decorative elements that you can add to a webpage or in the side navigation. There is a large selection of icons to choose from that are available in different weights, sizes, and colors.

Adding Font Awesome icons

Step 1:

To incorporate an icon on your page, determine where you want the icon placed on your page and set the alignment through the Styles dropdown in the WYSIWYG Toolbar.

styles dropdown

Step 2:

Click on the Component Icon in the WYSIWYG Toolbar.

component icon in toolbar

Step 3:

Select v3-Font Awesome Icon and click Insert.

component dialog box

Step 4:

Refer to the Font Awesome cheatsheet to see a listing of all the available icons and their names. Make note of the name of the icon you plan to use.

Font Awesome Cheatsheet

Step 5:

Return to the Edit Component Dialog Box  and fill out the fields accordingly. Make sure to copy the name of the icon exactly as it is shown in the cheatsheet.

component dialog box

Please note: The "Icon Custom CSS Styles" field can be used to include additional styling.

Step 6:

Click Save to view icon.

save button

Editing Font Awesome icons

Step 1:

Hover over the icon you wish to edit, click the blue box and then click on the pencil icon.Editing FA icons

Step 2:

Make edits accordingly and then click Save to view changes.

save button

Last Updated: 5/17/24