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 paint.net, previously I’ve used gimp. Unfortunately paint.net doesn’t support working with vector images which are need for this process but in a pain.net 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 http://fontastic.me/.

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.