.png)
Special Topic: Font Awesome Icons
Mar 08, 2023
1626
You can customize the icons used for directory(s) in the left hand navigation of the InfoHub using free Font Awesome icons. (If you have multiple directories, this is a great way to differentiate them on the Info Hub.) Here is a brief walkthrough of how to sign up for Font Awesome and find the icons that will work with GrowthZone.
|
|
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! |
- 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!)
Caption - 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:
- Open the directory you wish to update in the back office 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:
