Before You Begin:
- You'll need access to edit your directories in the back office.
- A free Font Awesome account (created in the steps below). Only free, version 5.15.4 icons work in GrowthZone — Pro icons will not.
- GrowthZone cannot assist with questions about Font Awesome beyond the scope of this article. If you need additional help with your Font Awesome account, please contact Font Awesome directly!
| NOTE: GrowthZone cannot assist if you have questions about Font Awesome beyond the scope of this article. If you need additional assistance with your Font Awesome account, please contact Font Awesome directly! |
Step-by-Step Instructions
-
Get started with Font Awesome: go here and sign up for the free kit. Don't worry, there's nothing you'll need to do with it; this is just getting access to a free Font Awesome account and the available icons.
-
Once you've gotten your confirmation email from Font Awesome and completed the account creation process, you can sign in.
-
After signing in you will end up in the Kits area. The kit you signed up for is here; go ahead and click on it to open it. (You can also give it a name if you like!)
-
Ignore the Quick Set Up for the Web instructions; GrowthZone has already done this for you. You want the Icons tab at the top of the page.
-
On the Icons tab you will be able to select from various icon sets. Go ahead and click on the link for "free and open-source icons" on the far right.
-
This will open the search page, already filtered to the free icons available to you. IMPORTANT! Over on the right, you will need to switch the version to 5.15.4 as well.
-
Find or search for an icon you like and click on it. Copy the HTML code by clicking on it; this will copy the code to your clipboard. If needed, you can paste it into a notepad-type document and come back to it later.
- A couple things to note:
- Be sure the icon window says "Start Using This Icon"; if it says "Start Using This Pro Icon" the icon requires a paid subscription and will not work in GrowthZone.
- Be sure the icon code has only two parts: fas and fa-(icon name). If you see fa-sharp or another third notation in the code, the icon requires a paid subscription or is the wrong version and will not work in GrowthZone.
- A couple things to note:
-
In the back office, go to Settings, Website section, click Directories, then open the directory you wish to update and paste the HTML code into the Optional Custom Icon field; remove everything except the fas fa-(icon name) text. It should look like this:
-
Click Done to save. The link to the directory in the Info Hub will now feature your preferred icon:
Common Pitfalls
- Using a Pro or wrong-version icon: If the icon window says "Start Using This Pro Icon," or the code contains a third notation like fa-sharp, it requires a paid subscription and will not display in GrowthZone. Use only free icons on version 5.15.4, with code in the two-part form fas fa-(icon name).
- Pasting the full HTML snippet: When filling the Optional Custom Icon field, remove everything except the fas fa-(icon name) text — leaving the surrounding markup will prevent the icon from rendering.