FontAwesome Extension

By default, Jump Start includes a custom build of FontAwesome 5's free version, which includes the solid and brand icon styles. The FontAwesome Extension lets you extend Jump Start's implementation of FontAwesome 5.

After purchasing the extension, you'll download it from your  customer dashboard, which will give you a ZIP package named like js-fontawesome-x-x-x.zip. Simply install this how you would any other WordPress plugin. — In your WordPress admin go to Plugins > Add New, and use the "Upload Plugin" button.

Once you've installed the FontAwesome Extension plugin, you'll get a new settings screen at WP Admin > Settings > FontAwesome. This is where you'll upload and configure your custom version of FontAwesome.

Note: If you're implementing FontAwesome Pro, you must purchase it from fontawesome.com/pro. Our extension does NOT include files from FontAwesome.

Adding Your Custom FontAwesome 5 Version

Consider the numbers in the following screenshot next to each option at WP Admin > Settings > FontAwesome, and we'll go through all of them, individually.

Settings > FontAwesome

1. Add your JavaScript file.

This is probably the most important option. Your FontAwesome JavaScript file will contain all of your icons available to be displayed on your website.

Unless you're creating a custom build of FontAwesome, you're most likely going to include the fontawesome-all.min.js file from either the free or pro version of FontAwesome. The following screenshot shows where this file can be found within the free and pro download packages from fontawesome.com.

Example: FontAwesome Pro ZIP package contents from fontawesome.com

On your settings page in the WordPress admin, under the "JavaScript File" option, click the "Add File" button to upload this file to your Media Library and then insert its URL into the option field.

Note: If you'd like to place the JavaScript file in your child theme or somewhere else online, simply paste the file URL into the option field. It doesn't need to be uploaded to your Media Library. Example: http://yoursite.com/wp-content/themes/your-child-theme/fontawesome-all.min.js

2. Add your icon data file.

The icon data file is optional, but needed if you want all of your new icons to be searchable within Jump Start's admin icon browser.

Within your FontAwesome download package, find the icons.json file, as it shows in the following screenshot.

Example: FontAwesome Pro ZIP package contents from fontawesome.com

Now, back at your settings page within the WordPress admin, under the "Data File" option, click the "Add File" button to upload this file to your Media Library and then insert its attachment ID into the option field.

Note: Because the absolute file path is needed to retrieve the file on your server, we save the attachment ID referencing the file and not a URL. So don't be worried when you see a number like 123 inserted into the option field.

Note: If you'd like to place the data file in your child theme, you'll need to add the full, absolute path to the file on your server. It doesn't need to be uploaded to your Media Library, but it must exist on the same server where your website exists. Example: /server/path/to/file/icons.json

3. Add the FontAwesome version number.

This is optional, but useful for keeping track of your FontAwesome version on the frontend of your website, and for browser caching issues when updating. When downloading your FontAwesome package containing the files you're uploading, just take note the version number, so you can enter it here. Example: 5.0.4

4. Select your icon styles.

Here you can select which icon styles you're including. If you're including the fontawesome-all.min.js file from your FontAwesome package, then you'll want to make sure and select all available boxes.

5. Select your default icon style.

Here, you can select the default icon style used when one isn't specified. By default, Jump Start uses FontAwesome's "solid" icon style to fall back on.