Version:
Cohesiondx.com

    Set up icon font libraries

    DX8 allows you to manage the Icon font libraries used by your website. It also provides an icon browser (shown below) to make it easy to find and add icons to your website styles. 

    Icon-browser.png

    Icon fonts are not images. They cannot be added to content like an image. They are a type of font and can only be used as content within styles on the pseudo elements :before and :after. If you want to add an icon as page content, use the image element and upload a .png or .svg.

    Should I upload or import my Icon fonts?

    When adding Icon fonts to your website settings you have the choice to 'Upload' or 'Import' your icon fonts. If you upload your icon fonts, they will be hosted on your web server along with your website pages and files. If you import your Icon fonts they will be hosted on Icomoon or another host.

    The choice of whether to Upload (self host) or Import (host elsewhere) is dependent on your website traffic levels, your website user geographical locations and other factors that influence the performance (speed) of Icon font serving. Icomoon provides two CDN options for serving icon fonts, both of which will provide high performance icon serving.

    Icon fonts files and file format requirements

    When adding icon fonts there are two items you require:

    1. If Uploading your icon fonts, you'll need a .zip file containing your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats
    2. A JSON file which provides an index of the icons within the icon font

    Supported icon font generators and JSON formats

    A simple way to create your icon font with JSON file is to use one of these popular icon font generators:

    DX8 supports the JSON format provided by Icomoon and Fontello. If you want to use an icon font generated by something else you must create your JSON file in this format.

    Icon font hosting options

    You have two options when using icon fonts.

    1. Upload to the website - The icon font will be served directly by your website
    2. Import from a URL - The icon font is served from a different host like AWS or an icon font host provider like Icomoon

    Uploading icon fonts in the Icomoon format

    Icomoon is a popular icon font generator and icon font hosting provider. Find out more about Icomoon here. 

    To upload an Icon font in the Icomoon format:

    1. Navigate to DX8 > Website settings > Icon libraries
    2. Within Icon fonts, click on Upload Icomoon icon font button 
    3. A new row of fields is added and you should see that Icomoon is displayed in a field. This is the font family
    4. Click the Upload.zip button and browse to your .zip file containing your icon font. This should include your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats. Successfully uploaded font files will be marked with a green tick
    5. Enter a name in the Label field
    6. Click Upload JSON and select your JSON file. You can download this from Icomoon. It provides an index of your icons and is required by the Icon picker. Find more information on getting started with Icomoon
    7. Click Save.

    Uploading icon fonts in the Fontello format

    Fontello is a popular icon font generator. It does not provide Icon font hosting. Find out more about Fontello here.

    To upload an Icon font in the Fontello format:

    1. Navigate to DX8 > Website settings > Icon libraries
    2. Within Icon fonts, click on the Blue button arrow and select Upload Fontello icon font
    3. A new row of fields is added and you should see that fontello is displayed in a field. This is the font family
    4. Click the Upload.zip button and browse to your .zip file containing your icon font. This should include your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats. Successfully uploaded font files will be marked with a green tick
    5. Enter a name in the Label field
    6. Click Upload JSON and select your JSON file. You can download this from the Fontello website. It provides an index of your icons and is required by the Icon picker. Find more information on getting started with Fontello
    7. Click Save

     

    Uploading icon fonts in a custom format

    If you do not want to use Icomoon or Fontello you can upload your own icon font and provide a JSON file for the icon picker. 

    To upload an Icon font in a custom Format:

    1. Navigate to DX8 > Website settings > Icon libraries
    2. Within Icon fonts, click on the Blue button arrow and select Upload custom icon font
    3. A new row of fields is added 
    4. Click the Upload.zip button and browse to your .zip file containing your icon font. This should include your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats. Successfully uploaded font files will be marked with a green tick
    5. Enter a name in the Label field
    6. Enter your font family in the Font family field. This must match the name of the font family you have uploaded
    7. Click Upload JSON and select your JSON file. This must be in this format
    8. Click Save

    Importing web icon fonts using Icomoon

    Icomoon provides a premium service where they will manage the hosting of your icon font on Amazon S3 or CloudFront. If using this service, all you have to do is add the URL of the hosted font and upload the JSON file they provide. Find out more about Icomoon here. 

    To import an icon font from Icomoon:

    1. Navigate to DX8 > Website settings > Icon libraries
    2. Within Icon fonts, click on Import Icomoon icon font button 
    3. Enter a name in the Label field. We recommend including 'Icomoon' in the label so you know that it's an Icomoon font in the future
    4. Enter the URL of where the icon font is hosted in the @import field. If using Icomoon to host your font, this is provided by them
    5. Click Upload JSON and select your JSON file. You can download this from Icomoon. It provides an index of your icons and is required by the Icon picker.
    6. Click Save.

    Importing web icon fonts using Fontello

    To import an icon font from Fontello:

    1. Navigate to DX8 > Website settings > Icon libraries
    2. Within Icon fonts, click on the Blue button arrow and select Import Fontello icon font
    3. A new row of fields will appear
    4. Enter a name in the Label field. We recommend including 'Fontello' in the label so you know that it's a Fontello font in the future
    5. Enter the URL of where the icon font is hosted in the @import field
    6. Click Upload JSON and select your JSON file. You can download this from Fontello. It provides an index of your icons and is required by the Icon picker
    7. Click Save

    Importing web icon fonts in a custom format

    If you do not want to use Icomoon or Fontello you can import your own icon font and provide a JSON file for the icon picker. 

    To import an Icon font in a Custom Format:

    1. Navigate to DX8 > Website settings > Icon libraries
    2. Within Icon fonts, click on the Blue button arrow and select Import Custom icon font
    3. A new row of fields will appear
    4. Enter a name in the Label field
    5. Enter the URL of where the icon font is hosted in the @import field
    6. Click Upload JSON and select your JSON file. This must be in this format
    7. Click Save

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

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

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket