Set up a Font Awesome Kit

It's pretty easy to set up a Kit to have icons available on a site:

First, go to fontawesome.com.

Sign in, with the login icon at the top right, with the account in lastpass (it@online-access.com)

Click on the "Your Kits" button. If you're already signed in, you can just go to the Kits page.

It'll take a little while to load, but you should be brought to a page of a list of all out kits.

You don't have to wait for it to load to add a new kit.

Either click one to edit it, or click " Add New Kit" to create a new kit.

Creating a Kit

Once you click " Add New Kit" you'll be brought to a kit creating wizard, but they don't give you all the options up front.

First you'll pick a style. You can just click "Pick Styles for Me", or select a random pro style. This is going to be changed later

Next is "How you'll use" Where you'll select "Hosted by Us" and have the chance to lock this down to certain domains. Make sure you upload at least 3 domains:

• the temp domain (1234.temp.online-access1.com)
• the resolving domain (the domain the website finishes on like hvacwebsites.com)
• the resolving domain with "www." at the beginning. (www.hvacwebsites.com)

Next pick a color and icon for the kit, but don't name it yet, it's a little easier that way (we'll be naming it a little later).

Then click "Make My Kit "

You'll be brought to the kit screen, where you'll go right to the " Settings" tab.

Here you'll name the kit to be [company ID] - [Company Name] - [Kit Id] (example: 1545 - Online-Access - 34rijpo546). The reason you didn't name it in the previous step was to have the id in the name field, so you don't have to get it from the script tag.
It's important to have the Kit Id in the name so we can search it easier, and copy from list of kits.

You'll make sure the "Technology" set to "SVG", and "Subset" set to "Auto-Subsetting" the rest of the options should be fin, but you can cross reference the image below to make sure.

Since we already did the domains, and are using the latest version, the rest of the options should not need to be touched.

Go ahead and click "Save Changes " at the bottom.

Don't worry about the warning, go ahead and click "Save Changes to Kit "

From here, you can copy the kit id from the name, the settings tab, or copy the tag to use on foundation sites.

Adding kit to the site

Once the kit's set up, it's pretty easy from here, you just need the kit ID. You can either copy it from the name, or from the set up tab.

Now, go to the company you want to add the kit to, and before you log in as the customer, go to "third party" > "misc.

Then, just paste that ID into the "Font Awesome Kit ID:" field, and save.

Important Notes:

If a customer is on foundation, the kit will not apply to the website through this method. You need to copy the full script and put it in the header.

If they are on bootstrap but don't have a kit yet, they're running on version 5. Most the time the icons slightly change, but are fine. Still double check when you add it.

The auto-subsetting option just sets the kit up so that it only loads the icons that the website is using to try to cut down on load.