Acquia Copilot is a conversational AI connected into our product documentation and knowledge base. Ask Copilot about product features, technical details, troubleshooting and how to get started with Acquia products.
Site Studio allows you to manage the Icon font libraries to use on your website. It also provides an icon browser (shown below) to make it easy to find and add icons to your website styles.
Important
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.
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:
A .zip file containing your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats
A JSON file which provides an index of the icons in the icon font. This is required by the Icon picker to display the icons.
Supported icon font generators and JSON formats
A simple way to create your icon font, including JSON file, is to use one of these popular icon font generators:
Icomoon - Generates icon fonts with JSON files and also provides icon font hosting. Find our more about getting started with Icomoon here.
Site Studio 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.
Upload to the website - The icon font will be served directly by your website
Import from a URL - The icon font is served from a different host like AWS or an icon font host provider like Icomoon
Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on Upload Icomoon icon font button
A new row of fields is added and you should see that Icomoon is displayed in a field. This is the font family
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
Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Upload Fontello icon font
A new row of fields is added and you should see that fontello is displayed in a field. This is the font family
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
Enter a name in the Label field
Click UploadJSON 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
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:
Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Upload custom icon font
A new row of fields is added
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
Enter a name in the Label field
Enter your font family in the Font family field. This must match the name of the font family you have uploaded
Click UploadJSON and select your JSON file. This must be in this format
Click Save
Importing web icon fonts using Icomoon
Important
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:
Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on Import Icomoon icon font button
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
Enter theURL of where the icon font is hosted in the @import field. If using Icomoon to host your font, this is provided by them
Click UploadJSON 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
Click Save.
Importing web icon fonts using Fontello
To import an icon font from Fontello:
Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Import Fontello icon font
A new row of fields will appear
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
Enter theURL of where the icon font is hosted in the @import field
Click UploadJSON 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
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:
Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Import Custom icon font
A new row of fields will appear
Enter a name in the Label field
Enter theURL of where the icon font is hosted in the @import field
Click UploadJSON and select your JSON file. This must be in this format
Click Save
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio