Version:

    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.

    icomoon-create-new-project.gif

     

    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.

    icomoon-configure-icon-fonts.gif

    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.

    icomoon-import-icons.png

     

    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

    download-font-file.gif

    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.

    Icomoon-download.png

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.