Adding custom icon fonts to a Sitecore Form to create a great customer experience

Lately I’ve been working with some high impact feature of Sitecore that don’t often get highlighted how easy they are to use and configure without the need for a developer. This post is going to outline how to create a custom font of icon’s used in a Sitecore Form which acts as a questionnaire to ask visitors about their interests. The majority of the post is focused  on the process of creating the custom icon font, the Sitecore steps are minimal.

One of the standard forms I work with starts off looking like this:


I’ll take you through the process to convert it to look like this, with custom icon’s:


Before I get into ‘the how’, let me explain ‘the why’ – Icon fonts are a modern way of using iconography. They are performant, play well with CSS styling, are cross browser compatible and will save you time and effort. Some more detailed benefits include:

1. Performance – As a font file is very small it means that there is a need for just one HTTP request on the server.

2. Aesthetics – Because, icon font characters are vectors, this means that they look well even in high pixel-density displays.

3. Change of the size – Another great advantage is that the size of these icon fonts can be changes in a few minutes, and there is no need for Photoshop

4. Effects – Any CSS effect that is applicable to fonts, for example text-shadows, can also be applicable for font icons.

5. Workflow effectivity – no need to generate sprites and manually position various sized images which saves time and efforts.

Step 1 – Find images you wish to convert to icons

For me this started with a google search for black and white images, save the image to file once found.


Step 2 – Convert image to vector

My usual image editing software of choice is, previously I’ve used gimp. Unfortunately doesn’t support working with vector images which are need for this process but in a forum their were many recommendations for the use of Inkscape.

Step 2.1 Open image in Inkscape

Select File from the menu, then Open e.g. nissan.jpg


Step 2.2 – Trace bitmap

Press Ctrl + A, this will highlight the image.

From the menu select Path, then select Trace Bitmap


Once the dialog appears, click Update and you should see the image displayed. If you don’t, click into the background and press Ctrl + A, whcih will highlight the image.


Click OK. Only press the button once.

In the background the vector of the image has been created and is highlights.

We now need to delete the original image (not the new vector) by first moving the vector to the side. Since the vector is highlighted after this process is should be easy to move. You can tell if you have the vector highlighted because the white space should be transparent.


Highlight the rear image and select Delete.

Now select the vector and from the menu select Edit, then Resize Page to Selection.


You can now save the file by clicking File, then Save As. Select Plain SVG from the drop down and enter a title.


Step 3 – Create your icon font file

For this step we will be using a free online service called

Step 3.1 – Create new font

Once logged in, use the New Font and Modify Font buttons to manage your new font. Clicking New Font doesn’t bring up a dialog to allow you to enter a name for your new font so you will need to use the Modify Font button\process.


Step 3.2 – Import icons

Now we will add the icons by selecting Add More Icons from the top menu, followed by selecting Import Icons, then navigate to the vector from the previous step.


Once added you can go back to the Home page and see your icon. From this page you can change the name of the icon set and also add additional icons.


Step 3.3 – Select icons

From this page you can search for different icon, from which you will need to select the ones you want included in your font file.


Step 3.4 – Download font

Once select, jump to the Publish tab and select Download which will start the download process.


Step 4 – Upload font into Sitecore

Navigate to the theme being used by your site and upload the files downloaded and publish them.


Step 5 – Modify CSS to apply your new font icons

Use Firefox and the style editor to construct your CSS file to target the necessary page elements.


Upload your custom CSS and publish


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.