Getting started with Icomoon

Icomoon is an icon font library that can be used with Site Studio. This guide provides information on how to correctly prepare your Icomoon font library ready for adding into Site Studio. Find more information on setting up your icon font libraries.

For more specific information on Icomoon, please refer to the official Icomoon documentation.

You can only upload one Icomoon icon font, which must be using Icomoon as the font family. It is on our roadmap to allow multiple Icomoon icon fonts.

Preparing Icomoon icon font libraries for Site Studio

To get started with your icon font library:

Step 1 - Create an Icomoon account

You will require an Icomoon account in order to configure your icon font library. Visit the signup page to create an account, or log in to an existing account.

Step 2 - Create a new project

1. Start the Icomoon app by clicking the Icomoon App button on the homepage
2. Navigate to the Projects screen by clicking on the menu then selecting Manage projects. Alternatively, you can visit the projects URL directly while logged in.

 

Step 3 - Configure your icon font library

1. On the project screen click Load to the right of your project
2. Click Add icons from font library and select the library you require
3. Select the icons in the set that you would like to include in your font library
4. Click Generate font at the bottom of the page.

There are many different options, both paid and free. In this example the Icomoon - Free set has been selected.

You can also choose to import custom icons into your library. These must be .svg files. To import icons, click the Import icons button and select them from your local drive.

 

Step 4 - Download the icon font and JSON files

To download the JSON file and icon font files:

1. Navigate to the Projects screen
2. Click Load to the right of the project
3. Click Generate font at the bottom right of the screen
4. Click Download at the bottom right of the screen
5. This will provide you with a .zip file

Step 5 - Unzip and extract the icon font and JSON files

Once you've downloaded the .zip file from Icomoon

1. Unzip the file to extract the Fonts and the JSON (shown below)
2. Create a new .zip file of just the Fonts folder. This is what you'll upload to Site Studio
3. The selection.json file is the JSON you'll upload to Site Studio.